如何在没有表格或遮罩的情况下创建悬停时的 CSS 缩放效果？-css教程-PHP中文网

如何在没有表格或遮罩的情况下创建悬停时的 CSS 缩放效果？

Mary-Kate Olsen

发布： 2024-11-28 21:19:11

原创

243 人浏览过

How to Create a CSS Zoom Effect on Hover Without Tables or Masks?

使用变换对鼠标悬停的 CSS 缩放效果

问题：

如何在鼠标悬停时创建缩放效果不使用表格或掩码的 HTML 图像

答案：

使用 Transform 属性和 Scale

考虑利用 CSS3 的 Transform 属性来实现缩放 -就像使用比例的效果。操作方法如下：

HTML:

<div class="thumbnail">
    <div class="image">
        <img src="path/to/image.jpg" 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中文网其他相关文章！