CSS实现鼠标悬停图片放大的方法

CSS中实现鼠标悬停时图片放大的效果，可以通过使用:hover伪类选择器和transform属性来完成。以下是一个简单的示例代码：

/* 初始状态下的图片样式 */
.img {
  width: 100px; /* 初始宽度 */
  transition: transform 0.5s ease; /* 平滑过渡效果 */
}

/* 鼠标悬停时的图片样式 */
.img:hover {
  transform: scale(1.2); /* 鼠标悬停时放大到原来的1.2倍 */
}

 HTML部分如下：

<img src="your-image.jpg" alt="描述文字" class="img">

 

在这个例子中，.img类定义了图片的初始状态，包括其宽度和过渡效果。transition属性确保了图片放大和缩小时有一个平滑的过渡效果，而不是突然变化。

当鼠标悬停在图片上时，.img:hover选择器会应用transform: scale(1.2);规则，将图片放大到原来的1.2倍。你可以根据需要调整scale()函数中的值来控制放大的程度。

请注意，transform属性可能需要浏览器前缀才能在某些旧版浏览器上正常工作，例如-webkit-transform用于Webkit内核的浏览器。但是，现代浏览器通常不需要这些前缀。