最近看到w3cfuns教程页面的一个效果，学习和实现了一下，感觉不错，大家以后可以在项目中使用，其中几个知识点：
1、使用伪类元素:before和after来处理显示在图片上面的半透明遮罩背景和图片效果
2、使用css3动画属性transform:scale(1.1) 变化图片大小
3、使用transition实现渐变动画效果
页面代码如下：
<body id="before-after">
<ul>
<li><a href="#"><img src="images/p4.jpg" width="390" alt=""></a></li>
<li><a href="#"><img src="images/p5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/p7.png" alt=""></a></li>
</ul>
</body>
css代码如下：
/* 伪元素before-after */
#before-after ul {
clear:both;
overflow:hidden;
margin:20px 0 0 0
}
#before-after li {
float:left;
margin:0 20px 0 0
}
#before-after li a {
height: 365px;
}
#before-after li a, #before-after li img {
display: block;
height: 220px;
overflow: hidden;
position: relative;
transition: all 0.3s ease 0s;
width: 390px;
}
#before-after li a:before, #before-after li a:after {
content: "";
height: 220px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity 0.4s ease 0s;
visibility: hidden;
width: 390px;
}
#before-after li a:before {
background:#7a7fd2;
z-index:1
}
#before-after li a:hover:before {
opacity: 0.8;
visibility: visible;
}
#before-after li:hover a:after {
z-index:2;
background:url(images/play.png) center center no-repeat;
}
#before-after li a:hover:after {
opacity: 1;
visibility: visible;
}
#before-after li:hover img {
transform:scale(1.1)
}
实例下载地址：http://pan.baidu.com/s/1dDH52Hb
相关推荐
一款非常漂亮的CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效，当鼠标滑过图片时，图片上方会覆盖一层渐变颜色的蒙版，移开图片蒙版又会以渐变的方式消失，视觉效果相当好看。
一款精美的css3半透明遮罩背景lightbox图片展示特效，这个lightbox效果共有三种展示图片的效果：渐隐效果，淡入淡出效果和全屏放大在缩小效果。
jQuery css3动画鼠标悬停遮罩图片高,支持主流浏览器
纯css3鼠标滑过图片文字遮罩动画特效 纯css3鼠标滑过图片文字遮罩动画特效 纯css3鼠标滑过图片文字遮罩动画特效 纯css3鼠标滑过图片文字遮罩动画特效
这是一款CSS3响应式图片列表布局，鼠标悬停图片遮罩层显示文字和图标动画特效，遮罩背景非常好看。
css3实现的响应鼠标悬停图片遮罩渐变背景动画特效源码.zip
这是一款css3鼠标滑过图片遮罩层动画效果。在该特效中，当用户鼠标滑过或悬停在图片上时，遮罩层以十字架开始扩大为矩形，然后出现描述文字和链接图标，效果非常炫酷。
这是一款基于CSS3实现的鼠标移到图片上显示遮罩显示文字信息，Bootstrap鼠标悬停图片遮罩特效代码。
一款创意十足的CSS3模糊背景图片透明遮罩动画特效，遮罩区域高亮显示背景图片左右滚动动画效果。
纯CSS3鼠标经过按钮背景填充动画特效
css3鼠标悬停图片神秘遮罩放大效果 css3鼠标悬停图片神秘遮罩放大效果 css3鼠标悬停图片神秘遮罩放大效果 css3鼠标悬停图片神秘遮罩放大效果
jQuery炫酷鼠标滑过图片显示遮罩层特效是一款基于jQuery和CSS3制作的炫酷的鼠标滑过图片显示遮罩层特效。
InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效。这组特效共有12种不同的鼠标滑过图片效果，分为滑动、旋转和翻转3大类。它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作。
这是一款使用纯CSS3制作的鼠标滑过图片遮罩层动画特效。该特效中，当鼠标滑过或悬停在图片上面时，会在图片上出现遮罩层动画，展示出图片的描述信息和链接图标按钮。
CSS3鼠标经过图片遮罩层代码基于Bootstrap3.3.5制作，自适应分辨率，兼容PC端和移动端，CSS3鼠标悬停动画效果遮罩层。
CSS3鼠标悬停图片遮罩动画特效是一款鼠标悬停图片炫酷动画，遮罩层图标和文字动画特效。
一款炫酷的CSS3鼠标悬停图片遮罩显示图标和文字动画特效，而且是响应式自适应电脑、平板和手机端浏览。
这是一款使用CSS3制作鼠标hover图片遮罩层动画效果。该特效完全使用CSS3来制作，在鼠标hover图片时，会生成一个不同颜色的遮罩层，并在遮罩层上显示图片的说明文字。
基于css3 Clip-path属性制作的悬停图片模糊放大遮罩显示文字动画特效，图文卡片布局鼠标悬停动画效果。