码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-08-24 19:56:52      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:pos   设置   遮罩层   遮罩   oci   overflow   绝对定位   sel   position   

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.效果

技术分享

 

技术分享

 

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

标签:pos   设置   遮罩层   遮罩   oci   overflow   绝对定位   sel   position   

原文地址:http://www.cnblogs.com/zxcc/p/7424341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!