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

Posted 2023-03-29

【中文标题】有人可以帮助获得与给定示例相同的放大效果吗？

【英文标题】：Can somebody help get the same zoom in effect as the given example?

【发布时间】：2021-12-09 19:38:41

【问题描述】：

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

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

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

【参考方案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>

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

.sketch__item .image-holder
 overflow: hidden;

.sketch__item:hover img
 transform: scale(1.2);