如何仅使用 CSS3 变换创建悬停图像缩放效果？

使用 CSS3 Transform 实现悬停时的 CSS 图像缩放效果

使用 CSS3 的转换属性可以轻松实现创建放大图像的悬停效果。此方法需要最少的代码，并提供流畅的视觉增强效果，无需复杂的表格或遮罩 div。

实现

要创建缩放效果，请按照以下步骤操作：

1. HTML: 将图像放入容器内元素。

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Your image">
    </div>
</div>

2. CSS:应用 CSS 样式来控制图像缩放。

.thumbnail {
    width: 320px;
    height: 240px;
}

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

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

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

• 过渡属性定义了缩放效果的持续时间和缓动函数。
• 变换：当光标悬停在容器上时，scale() 属性会缩放图像。

示例

请参阅以下示例小提琴： https://jsfiddle.net/rkd3x4uc/

注意：

• 缩放属性，直接对图像进行缩放，仅在互联网上支持探险家。为了实现跨浏览器兼容性，transform:scale() 属性是首选。
• 要将缩放后的图像限制在容器的边界内，您可以将 Overflow:hidden 添加到 .image 类。

以上是如何仅使用 CSS3 变换创建悬停图像缩放效果？的详细内容。更多信息请关注PHP中文网其他相关文章！