1.通过绝对定位的方法可以让图片覆盖在另一张图片上;
2.一开始设为hidden,当鼠标经过时改为visibility;
3.通过设置opacity和transition(ease-in-out),产生淡入淡出的动画效果。
<a>
<div class="img">
<img src="1.jpg" alt="">
<span class="magnifier"></span>
</div>
</a>
a{
display:block;
width: 158px;
height: 158px;
}
.img{
width: 158px;
height: 158px;
position:relative;
}
.img img{
width: 100%;
height: 100%;
}
a span.magnifier{
/*display:none;*/
visibility: hidden;
background: url(../images/magnifier.png) center no-repeat;
height: 64px;
width: 64px;
position: absolute;
top: 46px;
left: 46px;
opacity: 0;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
-ms-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}
a:hover span.magnifier{
/*display:block;*/
visibility: visible;
opacity: 1;
}
参考文献:CSS如何实现图片淡入淡出效果