css3动画鼠标滑过图片变大并且显示透明渐变遮罩背景

最近看到w3cfuns教程页面的一个效果，学习和实现了一下，感觉不错，大家以后可以在项目中使用，其中几个知识点：

 

1、使用伪类元素:before和after来处理显示在图片上面的半透明遮罩背景和图片效果

2、使用css3动画属性transform:scale(1.1) 变化图片大小

3、使用transition实现渐变动画效果

 

页面代码如下：

• 


• 


• 

 

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