CSS3过度鼠标经过实现炫酷图片效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
background: #000;
}
.box {
overflow: hidden;
position: relative;
width:450px;
height:320px;
border:1px solid #000;
margin:100px auto;
box-shadow:-1px 0px 45px 1px #fff;
}
.box:hover img {
transform: scale(1.1);
}
.box img {
transition: all .5s;
width: 100%;
height:100%;
}
.box span {
transition:all .5s;
position: absolute;
top: 40px;
left:-200px;
color: #fff;
font-size: 24px;
font-weight: 700;
}
.box:hover span {
left:45px;
}
.cover1 {
transition:all .5s;
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left:0;
background:rgba(0, 0, 255,0);
}
.cover2 {
transition: all 1s;
z-index:2;
position: absolute;
top: -220px;
left:0;
width: 2000px;
height: 250px;
background: rgba(255,255,255,.5);
transform: rotate(45deg);
}
.box:hover .cover1 {
background:rgba(0, 0, 255,.3);
}
.box:hover .cover2 {
left:-1595px;
/*top: -220px;*/
}
</style>
</head>
<body>
<div class="box">
<div class="cover2"></div>
<div class="cover1"></div>
<img src="./images1/timg.jpg">
<span>hello</span>
</div>
</body>
</html>