Scale image and hidden caption with jquery and css3

Question

Scale image and hidden caption with jquery and css3

Navigation

#1 by (1 votes)

2

I have a problem with image zoom and hide the caption of my own, in the hover of the image I increase the scale of it in the css, already in the jquery I hide the legend, but when climbing, the images next to it I already tried to change the z-index but it did not work and when a caption of an image disappears, all the others are also hidden, does anyone help?

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

php jquery html5 css3

asked by anonymous 17.12.2018 / 18:30

1 answer

Catch an HTML color As IMAGE [duplicate] GROUP BY last record by month and year how to do?

score 1 · Accepted Answer

I made this template, first to hide the text do not need jQuery just enough when you do the :hover in the article vc of a display:none in figurecaption , do not need hide() or show() for this.

Then, I put the :hover event in the wrong place, ideally it should stay in the container "parent of all" in your case is <article> so I changed it ... And % of% of% of% with% of% of% puts more than% of% of type%

article:hover  {
    z-index: 100;
}

Take a look to see if that's what you need.

OBS: Notice that you did not even need JS in the code! You can solve with CSS only

.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>