<!DOCTYPE html>
<html>
<head>
<title>弹出层演示</title>
<meta charset="utf-8">
<style type="text/css">
.ts1{
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
-ms-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
}
.ts2{
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.ts3{
-webkit-transition:all 0.8s ease-out;
-moz-transition:all 0.8s ease-out;
-o-transition:all 0.8s ease-out;
-ms-transition:all 0.8s ease-out;
transition:all 0.8s ease-out;
}
.dl1{
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.dl2{
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.dl3{
-webkit-transition-delay: 0.8s;
-moz-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.warp{
word-break: keep-all;
white-space: nowrap;
}
.thum{
display: inline-block;
*display: inline;
zoom:1;
width: 140px;
height: 120px;
padding: 10px;
border: solid 1px #F3F3F3;
position: relative;
overflow: hidden;
}
.thum h3{
width: 100%;
height: 26px;
line-height: 26px;
margin: 25px 0;
background: #000;
color: #fff;
}
.mask{
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top:0px;
text-align: center;
background-color:#009CDC;
}
a.preview-btn {
width: 60px;
height: 22px;
line-height: 22px;
text-align: center;
display: inline-block;
text-decoration: none;
background: #000;
color: #fff;
text-transform: lowercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
/*效果*/
.thum .mask{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.thum:hover .mask{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.85)";
filter: alpha(opacity=0.85);
opacity: 0.85;
}
.thum:hover img{
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
}
.thum h3{
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
}
.thum:hover h3{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.thum a.preview-btn{
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
}
.thum:hover a.preview-btn{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
</style>
</head>
<body>
<div class="warp">
<div class="thum">
<img class="ts2" width="140" height="120" src="http://www.8788.cn/uploadfile/2013/0407/20130407105213645.jpg"/>
<div class="mask ts3 dl1">
<h3 class="ts1 dl3">示例1</h3>
<a class="preview-btn ts1 dl2" onclick="javascript:void(0);">预览</a>
</div>
</div>
<div class="thum">
<img class="ts2" width="140" height="120" src="http://www.8788.cn/uploadfile/2013/0407/20130407105213645.jpg"/>
<div class="mask ts3 dl1">
<h3 class="ts1 dl3">示例2</h3>
<a class="preview-btn ts1 dl2" onclick="javascript:void(0);">预览</a>
</div>
</div>
<div class="thum">
<img class="ts2" width="140" height="120" src="http://www.8788.cn/uploadfile/2013/0407/20130407105213645.jpg"/>
<div class="mask ts3 dl1">
<h3 class="ts1 dl3">示例3</h3>
<a class="preview-btn ts1 dl2" onclick="javascript:void(0);">预览</a>
</div>
</div>
</div>
</body>
</html>
