【CSS】实现鼠标悬停图片放大的几种方法

实现鼠标悬停图片放大的效果，可以通过CSS的:hover伪类来实现。以下是几种方法：

1. 使用CSS的transform属性，结合:hover伪类，通过缩放(scale)实现图片放大效果。

img {
  transition: transform 0.3s ease;
  cursor: pointer;
}
 
img:hover {
  transform: scale(1.1);
}

2. 使用CSS的width和height属性，结合:hover伪类，通过直接改变图片大小实现放大效果。

img {
  transition: width 0.3s ease, height 0.3s ease;
  cursor: pointer;
  width: 100px; /* 假设图片原始大小 */
  height: 100px;
}
 
img:hover {
  width: 110px; /* 放大后的大小 */
  height: 110px;
}

3. 使用CSS的box-shadow属性，结合:hover伪类，通过增加阴影实现图片放大效果。

img {
  transition: box-shadow 0.3s ease;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
 
img:hover {
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.7);
}

以上代码中，transition属性用于定义过渡效果的时长和速度，cursor: pointer使得鼠标悬停在图片上时显示为指针形状，方便用户知道该图片可以交互。根据需求选择一种方法即可。