[分享]css3悬停放大

CSS3中有一个非常常用的效果就是悬停放大，这个效果可以让我们的网站更加生动、有趣。下面我们来看一下如何实现悬停放大效果。/ CSS代码 / .box { width: 200px; height: ...

CSS3中有一个非常常用的效果就是悬停放大，这个效果可以让我们的网站更加生动、有趣。下面我们来看一下如何实现悬停放大效果。

/* CSS代码 */

.box {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.box:hover {
  transform: scale(1.1);
}
.box img {
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}
.box:hover img {
  transform: scale(1.2);
} 

我们首先需要做的就是创建一个容器，这个容器用来包裹我们要悬停放大的元素。容器的宽高可以根据实际情况进行调整。

接下来，我们需要为容器设置 position: relative 和 overflow: hidden 属性，以便让我们的图片可以相对于容器进行定位，并且超出容器的部分不会被显示。

然后，我们需要在容器中放置我们要悬停放大的元素，这里以图片为例。为了让图片在容器中定位，我们需要给图片设置 position: absolute，然后将它的 top 和 left 值都设置为 0。

最后，我们需要为悬停事件添加一个:hover 伪类，并在其中设置 transform: scale() 属性，这个属性可以让我们的元素在悬停时缩放至指定 的大小。同时，通过为图片设置相同的属性，使其能够与容器一起缩放，从而实现悬停放大的效果。