鼠标hover图片时遮罩层匀速上升显示内容top定位

Posted 2020-10-04 陌凌雪

1.html

<div class="div1">
	<div class="div11">
	<p >Dolor nunc vule putateulr<br/><br/>March 23rd, 2015 5 Comments
	<br/><br/>Praesent vestim molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.
	Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes,
	nascetur ridiculus mus.
	</p>
	</div>
</div>

2.css设置实现功能。（父级元素设置相对定位，子元素绝对定位（子绝对，父相对））

.div1,.div2,.div3{float:left;margin:0 20px 0 25px;overflow:hidden;position:relative;}

.div1{width:350px;height:260px;background:url("images/img10.jpg");}
.div1>.div11{width:350px;height:260px;position:absolute;left:0px;top:232px;background:cyan;opacity:0.7;transition:1s linear;}
.center-wen>.div1:hover .div11{top:0;} 

3.效果