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 r髫潋啜缅epeat 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%; m锾攒揉敫argin: 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、查看效果。