2

Fala pessoal, estou com um problema no zoom de imagem e oculta a legenda da própria, no hover da imagem eu aumento a escala dela no css, já no jquery eu oculto a legenda, porem ao escalar, as imagens ao lado fica por cima já tentei alterar o z-index porém nao funcionou e quando uma legenda de uma imagem some, todas as outras também são ocultadas, alguém ajuda?

<?php
$Read = new Read;
$Read->ExeRead("ws_categories_product", "WHERE category_parent = '1'");
foreach ($Read->getResult() as $v) {
    extract($v);
    ?>
    <section class="content section-product">
        <header class="section_header_product">
            <h2><?= $category_title; ?></h2>
            <p class="tagline">
                <?= $category_content; ?>
            </p>
        </header>
        <div class="article-img-product">
            <?php
            $Read->ExeRead("ws_product", "WHERE post_category = :id", "id={$category_id}");
            foreach ($Read->getResult() as $value) {
                ?>
                <article>
                    <figure class="figure-product">
                        <img class="img-product" alt="<?= $value['post_title']; ?>" title="<?= $value['post_title']; ?>" src="<?= HOME; ?>/tim.php?src=<?= HOME; ?>/adm/uploads/<?= $value['post_cover']; ?>&w=460&h=300" /> 
                        <figcaption class="fig-img">
                            <span>
                                <?= $value['post_title']; ?>
                            </span>
                            <p class="figure-p">
                                <?= $value['post_content']; ?>
                            </p>
                        </figcaption>
                    </figure>
                </article>
                <?php
            }
            ?>
        </div>
    </section>
    <?php
}
?>

CSS:

.article-img-product {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.article-img-product article {
    padding: 5px;
    width: 25%;
    /* z-index: -1; */
}
.figure-product {
    position: relative;
}
.img-product {
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);
    z-index: -1;
    opacity: 0.9;
}
.img-product:hover {
    transform: scale(1.5);
    z-index: 9999;
    opacity: 1;
    /* border: 5px solid transparent; */
}

JQUERY:

$('.figure-product').on('mouseover', function () {
        $('.fig-img').hide();
    });
    $('.figure-product').on('mouseout', function () {
        $('.fig-img').show();
    });

Print1:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

1 Resposta 1

1

Cara fiz esse modelo, primeiro para esconder o texto não precisa de jQuery basta apenas quando fizer o :hover no article vc da um display:none no figurecaption, não precisa de hide() ou show() para isso.

Depois vc coloco o evento :hover no lugar errado, o ideal é que fique no container "pai de todos" no seu caso é o <article> então eu mudei isso... E o z-index do article com :hover vc coloca maior dos que não tem o :hover tipo

article:hover  {
    z-index: 100;
}

Da uma olhada pra ver se isso que vc precisa.

OBS: Repare que nem precisou de JS no código! Deu pra resolver só com CSS

.article-img-product {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.article-img-product article {
    padding: 5px;
    width: 25%;
    /* overflow: hidden; */
    /* z-index: -1; */
}

.figure-product {
    position: relative;
}

.img-product {
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);
    z-index: -1;
    opacity: 0.9;
}

article:hover .img-product {
    transform: scale(1.5);
    z-index: 9999;
    opacity: 1;
    /* border: 5px solid transparent; */
}
article:hover .figure-product figcaption {
    display: none;
}
article:hover  {
    z-index: 100;
}

/* esse CSS é apenas para vc vsualizar a sobreposição correta das imagens, depois vc pode deleta-lo */
img {
width: 200%;
height: auto;
}
<section class="content section-product">
    <header class="section_header_product">
        <h2>categ title</h2>
        <p class="tagline">
            categ content
        </p>
    </header>
    <div class="article-img-product">

        <article>
            <figure class="figure-product">
                <img class="img-product" src="https://placecage.com/100/100" alt="">
                <figcaption class="fig-img">
                    <span>
                        post title
                    </span>
                    <p class="figure-p">
                        post content
                    </p>
                </figcaption>
            </figure>
        </article>
        <article>
            <figure class="figure-product">
                <img class="img-product" src="https://placecage.com/101/100" alt="">
                <figcaption class="fig-img">
                    <span>
                        post title
                    </span>
                    <p class="figure-p">
                        post content
                    </p>
                </figcaption>
            </figure>
        </article>
        <article>
            <figure class="figure-product">
                <img class="img-product" src="https://placecage.com/100/100" alt="">
                <figcaption class="fig-img">
                    <span>
                        post title
                    </span>
                    <p class="figure-p">
                        post content
                    </p>
                </figcaption>
            </figure>
        </article>

    </div>
</section>

2
  • 1
    Valeu!!! esqueci que poderia usar o display:none no hover, até faço isso no sub-menu do nav, obrigado, deu certinho! 17/12/2018 às 18:02
  • 1
    @JASL isso ai! Nem sempre o jQuery é a melhor solução, principalmente para casos simples como esse. Boa sorte ai no projeto!
    – hugocsl
    17/12/2018 às 18:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .