有人可以帮助获得与给定示例相同的放大效果吗？

Question

我网站的每个页面上都有以下图片库代码。我想要相同的放大效果而不是不透明效果，最好使用不同的编码风格，因为我不想公然复制示例站点。

这是我的代码，您可以看到它显示在我的网站上，位于排名 table 下方的图片库部分。我如何修改它以用类似的放大效果替换不透明效果？

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

Answer 1

我跳进了你的网站并抓住了这个 sketch__item。我添加了 image-holder 来保存图像。

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

项目悬停后，图像将从 1 scale 变为 1.2。（无论如何你都可以玩这个）。持有图像的 div 将隐藏图像的溢出，因为它正在调整大小。

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

有人可以帮助获得与给定示例相同的放大效果吗？

Can somebody help get the same zoom in effect as the given example?

html

css

image

zooming

gallery