如何在没有表格或遮罩的情况下创建悬停时的 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);  
}

演示说明：

• scale() 值表示图像原始大小的倍数，从而产生 25% 的缩放效果。
• transition 属性指定缩放效果的平滑过渡。
• 这种方法避免使用额外的元素或 CSS 技巧，使其成为实现所需缩放效果的简单有效的方法。

以上是如何在没有表格或遮罩的情况下创建悬停时的 CSS 缩放效果？的详细内容。更多信息请关注PHP中文网其他相关文章！