如何使用 CSS 在鼠标悬停时缩放图像？

图像缩放效果用于在鼠标悬停或单击时对图像应用缩放。这种类型的效果主要用于投资组合网站。在我们想要在图像上显示用户详细信息的情况下，它很有用。

创建鼠标悬停效果有两种可能的方法。

• 使用 JavaScript
• 使用 CSS

在本文中，我们将看到如何使用 CSS 在悬停时缩放图像。本文包含两部分代码。第一部分包含 HTML 代码，第二部分包含 CSS 代码。

HTML 代码：在本节中，我们将使用 HTML 来创建悬停效果时图像缩放的基本结构。

CSS 代码：在本节中，我们将使用一些 CSS 属性在鼠标悬停时缩放图像。要创建缩放效果，我们将使用 transition 和 transform 属性。

完整代码：在本节中，我们将结合以上两节使用 HTML 和 CSS 创建鼠标悬停时的图像缩放效果。

例子：

输出：