一般的蒙版效果

正常效果当鼠标放到图片上时效果。

body部分

<div>

    <a href="#">        <div class="emptywihte">            <p>别样机车夹克</p>        </div>        <img src="images/1460690135_8THFWK.jpg" alt="图片" title="别样机车夹克"/>    </a></div>

Css部分

div{  width: 300px;    position: relative;}div p{    font-size: 25px;    color: black;    position: absolute;    left: 80px;    top: 120px;}.emptywihte{    width: 300px;    height: 300px;    position: absolute;    left: 0;    top: 0;    background: white;    z-index:15;    opacity: 0;}.emptywihte:hover{    opacity: .6;    transition: opacity linear 2s;}