正常效果当鼠标放到图片上时效果。
body部分
<div>
<a href="#">
<div class="emptywihte">
<p>别样机车夹克</p>
</div>
<img src="images/1460690135_8THFWK.jpg" alt="图片" title="别样机车夹克"/>
</a>
</div>
Css部分
div{ 300px;
position: relative;
}
div p{
font-size: 25px;
color: black;
position: absolute;
left: 80px;
top: 120px;
}
.emptywihte{
300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
background: white;
z-index:15;
opacity: 0;
}
.emptywihte:hover{
opacity: .6;
transition: opacity linear 2s;
}