一个简单的图片鼠标滑动后效果,只需要通过CSS进行制作
原图片:
当鼠标滑过的时候的效果:
(1)HTML代码如下:
<div class="picture-box">
<img src="img/01.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>图片标题</h1>
<p>描述信息</p>
</div>
</div>
</div>
(2-1)设置当鼠标滑动到.picture-box时,.caption的透明度变成1(原本是0,下面CSS会设置):
.picture-box:hover .caption{
opacity: 1;
}
(2-2)首先设置父级div,设置其宽度高度等,并设置为相对定位,由于我图片要随浏览器尺寸变化,所以设置width:100%,高度没有设置:
.picture-box{
width: 100%;
position: relative;
padding: 0;
overflow: hidden;
}
(2-3)设置img,这里要设置为左浮动,同时设置z-index:
.picture-box img{
width: 100%;
height: auto;
z-index: 4;
float: left;
}
(2-4)设置caption,要设置为绝对定位,同时高度宽度设置为父元素的100%,设置transition过度
.picture-box .caption{
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
opacity: 0;
-webkit-transition:all 0.45s ease-in-out;
-moz-transition:all 0.45s ease-in-out;
-o-transition:all 0.45s ease-in-out;
-ms-transition:all 0.45s ease-in-out;
transition:all 0.45s ease-in-out;
}
(2-5)设置黑色背景效果.blur:
.picture-box .caption .blur{
background-color: rgba(0,0,0,0.55);
width: 100%;
height: 100%;
z-index: 5;
position: absolute;
}
(2-6)设置文字效果:
.picture-box .caption .caption-text{
width: 100%;
height: 100%;
z-index: 10;
color: #fff;
position: absolute;
text-align: center;
top:35%;
}