有没有人能帮我实现和上面的例子一样的放大效果？

Question

我在我的网站上的每个页面上都有以下图片库代码。而不是不透明的效果，我想要相同的放大效果，最好是用不同的编码风格，因为我不想明目张胆地复制它的样本网站。

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

​

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