<!DOCTYPE html>
<html>
<meta charset=utf-8>
<head>
<style>
body{
backgound:#f9f9f9;
}
.img{
position: absolute;
width: 300px;
height: 200px;
border:10px solid #ccc;
overflow:hidden;
}
.img img{
width:100%;
height:100%;
transition:all .3s ease;
}
.img:hover img{
-webkit-transform:scale(1.5);
}
.back{
z-index:9999;
background-color: rgba(219,127,8, 0);
position: absolute;
top: 0;
left: 0;
height:100%;
text-align: center;
color: #000;
-webkit-transition:all .5s ease;
}
.back h2{
text-align:center;
color:#000;
-webkit-transition:all .5s ease;
background-color: rgba(0,0,0, 0.5);
height:30px;
position: relative;
top: -55px;
}
.back p{
position: relative;
bottom: -130px;
-webkit-transition:all .5s ease;
}
.back:hover h2{
text-align:center;
color:#fff;
top:0;
}
.back:hover p{
text-align:center;
color:#fff;
bottom:0;
}
.info{
background-color: rgba(0,0,0,.7);
padding:5px;
color:#fff;
text-decoration: none;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.back:hover a{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.back:hover{
background-color: rgba(219,127,8,.7);
}
</style>
</head>
<body>
<div class="img">
<img src="1.jpg">
<div class="back">
<h2>Hover Style #1</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
</body>
</html>
时间： 2024-11-08 23:39:05