html+css3鼠标移上图片放大遮罩

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<div id="wrapper">

 <div class="main_img"> <img src="images/pic_01.jpg">

  <div class="show"> <span class="imgArea"> <a title="观看视频" href="#">观看视频</a> </span> </div>

 </div> 

</div>

4、初始化css代码。

<style>

body { text-align: center; background: none repeat scroll 0 0 #FFFFFF; color: #222222; font-family: "微软雅黑"; line-height: 1.6; }

a { font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", sans-serif; font-size: 14px; color: #333; text-decoration: none; }

</style>

5、书写css代码。

#wrapper { max-width: 260px; width: 100%; margin: 0px auto; margin-top: 10px; }

.main_img { height: 180px; width: 250px; overflow: hidden; position: relative; }

.main_img img { height: 180px; width: 250px; overflow-x: hidden; overflow-y: hidden; position: relative; z-index: 1; transition-delay: 0s; transition-duration: 1s; transition-property: all; transition-timing-function: ease; }

.main_img .show { background: rgba(0, 0, 0, 0.4); height: 180px; left: 0; opacity: 0; filter: alpha(opacity=0); position: absolute; top: 0; transition-delay: 0s; transition-duration: 0.3s; transition-property: opacity; transition-timing-function: ease-in; width: 250px; z-index: 200; }

.main_img .show .imgArea { left: 50%; bottom: 0; margin: -15px 0px 0px -40px; opacity: 0; position: absolute; transition-delay: 0s; transition-duration: 0.4s; transition-property: all; transition-timing-function: ease; }

.main_img .show .imgArea a { color: rgba(255,255,255, 0.8); display: block; padding: 5px 12px; border: rgba(255,255,255, 0.6) 1px solid; border-radius: 8px; font-size: 16px; }

.main_img .show .imgArea a:hover { background: rgba(255,255,255, 0.7); color: rgba(0,0,0, 0.6); }

.main_img:hover .show { opacity: 1; filter: alpha(opacity=100); }

.main_img:hover .show .imgArea { opacity: 1; filter: alpha(opacity=100); bottom: 40%; }

.main_img:hover img { transform: scale(1.2, 1.2); }

6、代码整体结构。

7、查看效果。