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 differnt coding style, since i dont want to blatantly copy it of the sample site.

my site: Heres you can see the image gallery on my site:

heres 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 ( as in the sample site given above)

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

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);
}