[分享]css3悬停图片放大

CSS3悬停图片放大是一种常见的网页设计效果，可以在鼠标滑过图片时实现图片的放大效果，增强用户的体验感。下面我们来看看如何使用CSS3实现这个效果。.imgzoom { transition: tra...

CSS3悬停图片放大是一种常见的网页设计效果，可以在鼠标滑过图片时实现图片的放大效果，增强用户的体验感。下面我们来看看如何使用CSS3实现这个效果。

.img-zoom {
  transition: transform .5s;
}
.img-zoom:hover {
  transform: scale(1.2);
} 

以上代码中，我们定义了一个名为.img-zoom的样式类。在样式类中，我们使用CSS3的transition属性，对图片的transform属性进行动画过渡效果，并设置过渡时间为0.5秒。

同时，在:hover伪类中，我们通过设置transform：scale（1.2）来实现图片的放大效果。其中scale属性设置图片的缩放倍数，1表示图片原本大小，1.2表示放大20%。

通过以上代码，我们实现了一个简单的CSS3悬停图片放大效果。在实际项目中，我们可以对图片的样式进行自定义设置，如图片的边距、圆角、阴影等，从而实现更加丰富多彩的效果。