[分享]css3放大镜插件

CSS3放大镜插件是常用的网站效果之一，它可以让用户在鼠标指针悬浮在图片上时，通过放大镜功能查看图片的细节部分。实现方法比较简单，下面我们简单介绍一下。.magnify { : relative; }...

CSS3放大镜插件是常用的网站效果之一，它可以让用户在鼠标指针悬浮在图片上时，通过放大镜功能查看图片的细节部分。实现方法比较简单，下面我们简单介绍一下。

.magnify {
  position: relative;
}
.magnify img {
  display: block;
}
.magnify>.large {
  visibility: hidden;
  position: absolute;
  right: -100%;
  top: 0;
}
.magnify:hover>.large {
  visibility: visible;
}

.magnify:hover img {
  transform: scale(2);
  transform-origin: 0 0;
} 

第一个CSS规则是将容器元素设置为相对定位，这是因为我们需要设置放大镜的位置并将相对于容器定位。接下来设置图片为块元素并放大图片效果，方便观察。.large类是放大的图片，初始先设置为隐藏，鼠标悬浮在容器上时将其显示。

鼠标悬浮容器上时，设置图片为原来的两倍大小并设置变形原点为左上角，这样在鼠标移动时就可以实现类似放大镜放大观察效果。