Scale image and hide caption with jquery and css3

Question

Talk personal, I have an image zoom problem and hide the caption itself, in the image’s Hover I increase its scale in css, already in jquery I hide the caption, but when scaling, the images next to is over already tried to change the z-index but it didn’t work and when a caption of an image goes missing, all the others are also hidden, someone helps?

<?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:

Answer 1

Guy made this template, first to hide the text does not need jQuery just when do the :hover in the article you give a display:none in the figurecaption, doesn’t need hide() or show() for that reason.

Then you put the event :hover in the wrong place, ideally stay in the container "Father of all" in your case is the <article> then I changed it... and the z-index of article with :hover You put bigger than you don’t have the :hover guy

article:hover  {
    z-index: 100;
}

Take a look to see if this is what you need.

OBS: Note that you didn’t even need JS in the code! I could solve only with 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>