如何在沒有表格或遮罩的情況下建立懸停時的 CSS 縮放效果？

使用變換對滑鼠懸停的CSS 縮放效果

問題：

如何在滑鼠懸停時建立縮放效果不使用表格或遮罩的HTML圖像

答案：

使用Transform 屬性和Scale

考慮利用CSS3 的Transform 屬性來實現縮放使用比例的效果。操作方法如下：

HTML:

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="path/to/image.jpg" class="lazy" alt="Image hover effect">
    </div>
</div>

CSS:

.thumbnail {
    width: desired-width;
    height: desired-height;
}

.image {
    width: 100%;
    height: 100%;    
}

.image img {
    transition: all 1s ease;
}

.image:hover img {
    transform: scale(1.25);  
}

CSS:

CSS:
• 展示

scale() 值表示影像原始大小的倍數，產生 25% 的縮放效果。 transition 屬性指定縮放效果的平滑過渡。 這種方法避免使用額外的元素或 CSS 技巧，使其成為實現所需縮放效果的簡單有效的方法。

以上是如何在沒有表格或遮罩的情況下建立懸停時的 CSS 縮放效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！