一般的蒙版效果

标签：

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

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;
}

一般的蒙版效果

标签：

原文地址：http://www.cnblogs.com/shengliang74/p/5426932.html