先來一個簡單的實現方法：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .mask-wrapper { position: relative; overflow: hidden; } .mask-inner { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; -moz-transition: top ease 200ms; -o-transition: top ease 200ms; -webkit-transition: top ease 200ms; transition: top ease 200ms; } .mask-wrapper:hover .mask-inner { top: 0; } #my-mask { width: 300px; height: 200px; background: red; } #my-mask .mask-inner { background: rgba(0,0,0,.5); } </style></head><body> <p id="my-mask" class="mask-wrapper"> <p>Lorem ipsum</p> <p class="mask-inner"> <p>foo bar</p> </p></p></body></html>
來個更進階點的：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font: 12px/1.5 arail; } ul { list-style: none; } .icon-lists { overflow: hidden; background: #f7f7f7; padding: 40px; } .icon-lists .box { float: left; margin-right: 10px; } .box { position: relative; width: 46px; height: 46px; overflow: hidden; z-index: 1; } .box i, .box .info { display: block; width: 46px; height: 46px; border-radius: 46px; } .box .shadow { position: absolute; top: 0; z-index: 10; border-radius: 0; background: url(<a href="http://xiaomingming.qiniudn.com/shadow.png">http://xiaomingming.qiniudn.com/shadow.png</a>) no-repeat; } .box .icon { position: absolute; top: 0; line-height: 46px; text-align: center; background: #eee; color: #333; font-size: 14px; } .box .info { position: absolute; top: 46px; z-index: 2; background: orange; color: #fff; text-align: center; line-height: 46px; -webkit-transition:top .2s ease-in; -moz-transition:top .2s ease-in; transition:top .2s ease-in; } .box:hover>.info { top:0; }</p><p> </style></head><body> <ul class="icon-lists"> <li class="box"> <i class="shadow"></i> <i class="icon">A</i> <p class="info">服裝</p> </li> <li class="box"> <i class="shadow"></i> <i class="icon">B</i> <p class="info">鞋包</p> </li> <li class="box"> <i class="shadow"></i> <i class="icon">C</i> <p class="info">配飾</p> </li> <li class="box"> <i class="shadow"></i> <i class="icon">D</i> <p class="info">運動</p> </li> </ul></p></body></html>
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
