PHP中文网2017-04-10 14:30:20
详见本文:http://blog.segmentfault.com/f2e/1190000000575112。不过,你这个不至于用到背景图啦。
demo:
http://jsfiddle.net/xmlovecss/N7HpU/
伊谢尔伦2017-04-10 14:30:20
我给题主提供替一下我的思路:
1.overlay层(产品服务这一层)初始化时可以隐藏在父节点下。
<p class="father"> 相对定位并隐藏超出部分
<img src=" " />
<p class="overlay">产品服务</p> 绝对定位
</p>
2.鼠标移入时,先将overlay层显示,再将其top通过运动移动至指定地点。
3.当鼠标移出时再将overlay回到原状态
黄舟2017-04-10 14:30:20
<p class="main">
<img>
<p class="mask"></p>
</p>
给最外层的p设置
.main{position:relative;}
.main:hover .mask{top:0;}
.mask{position:absolute;top:-height;transform:all .5s;}