<div id="introduce">
<div id="content">
<div id="logo1">
<img class="anim_fade_image" src="jslunbo1/images/logo1.png" />
<img id="juzhong" src="jslunbo1/images/erweima1.png" />
</div>
<div id="logo2">
<img class="anim_fade_image" src="jslunbo1/images/logo2.png" />
<img id="juzhong2" src="jslunbo1/images/erweima2.png" />
</div>
<div id="logo3">
<img class="anim_fade_image" src="jslunbo1/images/logo3.png" />
<img id="juzhong3" src="jslunbo1/images/erweima3.png" />
</div>
</div>
</div>
css样式如下:
.anim_fade_image{
position:absolute;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
}
.anim_fade_image:hover, .anim_fade_image_hover {
opacity:0;
filter: alpha(opacity=0);
}
#juzhong{
width: 216px;
height: 308px;
margin: 59.5px 41.5px;
}
#juzhong2{
width: 216px;
height: 308px;
margin: 59.5px 41.5px;
}
#juzhong3{
width: 216px;
height: 308px;
margin: 59.5px 52.5px;
}
效果图如下:
鼠标放在图上:
鼠标一走恢复: