如何使用 CSS 创建悬停图像缩放效果？

使用 CSS 在悬停时对图像进行缩放效果

在 Web 开发中，在鼠标悬停时对图像应用缩放效果是常见的设计元素。让我们探索使用 CSS3 变换的解决方案。

用于缩放效果的 CSS3 变换

CSS3 变换属性和 scale() 函数允许对图像进行缩放效果。下面是一个代码片段：

HTML:

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

CSS:

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

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

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

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

在此示例中， image div 包含图像。当图像悬停时，使用scale()函数将图像放大1.25倍。过渡属性确保平滑的缩放动画。

附加说明

• 您可以调整比例值以达到所需的缩放级别。
• CSS 溢出：隐藏可以应用于图像 div 以隐藏缩放图像的任何溢出部分。
• IE 支持缩放属性，但其他版本不支持浏览器。

演示

这是现场演示：

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="https://placeimg.com/320/240/nature" class="lazy" alt="Image">
    </div>
</div>

<style>
    .thumbnail {
        width: 320px;
        height: 240px;
    }

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

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

    .image:hover img {
        transform: scale(1.25);
    }
</style>

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