[分享]css3悬浮放大3图片

CSS3悬浮放大3图片，是一种常见的网页设计效果，在众多网页中都能看到其存在。这种效果通过CSS3技术的实现来达到。下面我们一起来看看如何实现这种效果。/ HTML代码 / / CSS3代码 /...

CSS3悬浮放大3图片，是一种常见的网页设计效果，在众多网页中都能看到其存在。这种效果通过CSS3技术的实现来达到。下面我们一起来看看如何实现这种效果。

/* HTML代码 */ 
<div class="img-wrap">
  <img src="example.jpg" alt="example">
</div>

/* CSS3代码 */
.img-wrap {
  position: relative;
  overflow: hidden;
}
.img-wrap img {
  width: 100%;
  height: auto;
  transition: all 0.3s ease;
}
.img-wrap:hover img {
  transform: scale(1.2);
} 

首先，我们将需要制作悬浮放大效果的图片包裹在一个div标签中，并设置其样式position: relative; overflow: hidden;。

然后，我们将img标签的宽度设置为100%，高度设置为自动，并添加transition: all 0.3s ease;属性，实现图片缩放过渡效果。

最后，在鼠标悬浮到图片上时，我们将img标签的transform属性设置为scale(1.2)，实现图片放大效果。

通过以上CSS3代码实现，便可轻松制作出鼠标悬浮放大3图片的效果。