CSS简单的鼠标滑入图片效果

一个简单的图片鼠标滑动后效果，只需要通过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%; }