I have the following image gallery code on every page on my website. Instead of the opacity effect I want the same zoom in effect, preferably with a different coding style, since I don't want to blatantly copy it of the sample site.

Here's my code, which you can see is displayed on my site, in the image gallery section below the ranking table. How can I modify it to replace the opacity effect with a similar zoom in effect?

.sketch-wrapper {
    margin-top: 30px;
    margin-bottom: 30px;
}

div.sketch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.5rem;
}
div.sketch__item {
    border: solid #f5f5f5;
}
div.sketch__item--1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}
div.sketch__item--2 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
}

@media screen and (max-width: 700px) {
    div.sketch {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        width: calc(45%   1.6em);
    }
}
@media screen and (min-width: 700px) {
    div.sketch {
        display: grid;
        flex-wrap: wrap;
        margin: 0 auto;
        width: calc(65%   1.6em);
    }
    img.sketch__img:hover {
        opacity: 0.5;
    }
    div.anchor {
        text-align: center;
        font-size: 14px;
        padding: 0 5px;
    }
}
.anchor-text {
    font-size: 14px;
    text-align: center;
}
.sketch img {
    display: block;
    border: solid;
    border-color: #fff;
    border-radius: 5px;
    height: 100px;
    width: 200px;
        transition: 0.5s;
        object-fit: cover;
}

    <div class="sketch__item">
        <div class="sketch__item--1">
            <img src="https://mysticmio.de/wp-content/uploads/2021/04/mysticmio_pagehero-1.jpg" class="sketch__img">
        </div>
        <div class="anchor">
            <div class="anchor-text">
                <a href="https://mysticmio.de/tarot/">Online Tarot-Orakel</a>
            </div>
        </div>  
    </div>

   <div class="sketch__item">
        <div class="sketch__item--2">
            <img src="https://mysticmio.de/wp-content/uploads/2021/04/lenormand-karten_fp-1.jpg" class="sketch__img">
        </div>
        <div class="anchor">
            <div class="anchor-text">
                <a href="https://mysticmio.de/lenormand/">Lenormand online legen</a>
            </div>
        </div>  
    </div>

</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I jumped into your website and grab this sketch__item. I added image-holder to hold the image.

<div class="sketch__item">
    <div class="sketch__item--2 image-holder">
        <img src="https://mysticmio.de/wp-content/uploads/2021/04/rider-waite-online-1.jpg" data-src="https://mysticmio.de/wp-content/uploads/2021/04/rider-waite-online-1.jpg" class="sketch__img lazy loaded" data-was-processed="true">
    </div>
    <div class="anchor">
        <div class="anchor-text">
            <a href="https://mysticmio.de/tarot/rider-waite/">Rider-Waite Kartenlegen</a>
        </div>
    </div>  
</div>

Once the item is hovered, image will scale from 1 to 1.2. (You can play with this anyways). The div that is holding the image will hide the overflow of the image since it's resizing.

.sketch__item .image-holder{
 overflow: hidden;
}
.sketch__item:hover img{
 transform: scale(1.2);
}