html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<br />
<br />
<br />
<div style="margin-left:100px;">
<table width="200" >
<tr>
<td> <div class="btn01" style="height:183px; 250px; margin-right:18px;">
<img src="img/rolling1.png" alt="">
<div class="ovrly"></div>
</div></td>
<td> <div class="dtl04" style="margin-right:18px;">
<img src="img/rolling1.png" alt="" >
<div class="dtl"> </div>
</div></td>
<td>
<div class="btn03" style="margin-right:18px;">
<img src="img/rolling1.png" alt="" >
<div class="ovrly"></div>
</div></td>
</tr>
</table>
</div>
</body>
</html>
css.css样式文件：
@charset "utf-8";
/* CSS Document */
.btn01 {
100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.btn01 img {
position: relative;
100%;
top: 0;
left: 0;
}
.btn01 .ovrly {
background-image:url(../img/rolling2.png);
height: 100%;
left: 0;
top: -100%;
100%;
position: absolute;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.btn01:hover .ovrly {
top: 0;
}
.btn03 {
height:183px;
250px;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.btn03 img {
position: relative;
height:183px;
250px;
top: 0;
left: 0;
}
.btn03 .ovrly {
background-image:url(../img/rolling2.png);
height: 100%;
left: 0;
top: 100%;
250px;
position: absolute;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.btn03:hover .ovrly {
top: 0;
}
.dtl04 {
height:183px;
250px;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.dtl04 img {
position: relative;
height:183px;
250px;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.dtl04 .dtl {
position: absolute;
background-image:url(../img/rolling2.png);
height:183px;
200px;
top: 70%;
padding: 0 15px 0 15px;
left: 0;
opacity: 0;
z-index: 1;
overflow: auto;
visibility: hidden;
-webkit-transition: all 0.3s 0.15s;
-moz-transition: all 0.3s 0.15s;
-o-transition: all 0.3s 0.15s;
transition: all 0.3s 0.15s;
}
.dtl04:hover .dtl {
top: 0;
opacity: 1;
visibility: visible;
}