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

在网站设计中，经常会用到图片，并且常常需要对图片进行一些特效处理，如：鼠标悬停时放大、变亮等。本篇介绍如何使用 CSS 在鼠标悬停时缩放图像。

HTML

首先，在 HTML 中插入图片。以下是 HTML 代码片段：

<div class="image-container">
  <img src="helloworld.jpg" alt="helloworld">
</div>

其中，img 标签中的 src 属性为图片地址，alt 属性为图片未能正常显示时的替代文本。img 标签还被包含在一个 div 标签中，此后 CSS 样式将应用于这个 div 元素。

CSS

CSS 是设置鼠标悬停缩放效果的关键，以下是 CSS 代码片段：

.image-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}

.image-container:hover img {
  transform: scale(1.2);
}

首先，我们设置了图片容器 .image-container 的宽度和高度，以及设为超出容器部分隐藏。然后，设置图片的宽度和高度都为容器大小，使图片填充完整个容器。

接着，使用了 CSS3 的 transition 属性，指定了鼠标悬停缩放的过渡效果。all 表示所有属性都会过渡，0.3s 表示过渡时间为 0.3 秒，ease-in-out 则是过渡动画速度或慢或快。

最后，使用 :hover 选择器设置鼠标悬停时的效果，transform: scale(1.2) 表示放大图片到原大小的 1.2 倍。

Markdown 返回

本篇主题为如何使用 CSS 在鼠标悬停时缩放图像，包含 HTML 和 CSS 代码。通过设置图片容器的大小和图片样式，以及定义过渡效果和鼠标悬停时的效果，就能够实现缩放图像的特效。

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

## HTML

<div class="image-container">
  <img src="helloworld.jpg" alt="helloworld">
</div>

## CSS

.image-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}

.image-container:hover img {
  transform: scale(1.2);
}