CSS仿艺龙首页鼠标移入图片放大
生活随笔
收集整理的這篇文章主要介紹了
CSS仿艺龙首页鼠标移入图片放大
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS仿藝龍首頁鼠標移入圖片放大，效果似乎沒有js好。。。。。。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>圖片放大</title><style>*{padding:0;margin:0;}body{padding-top: 100px;}li{list-style: none;height: 260px;}ul{width:1200px;height:250px;overflow:hidden;margin: 0 auto;}li{float:left;position: relative;width:200px;-webkit-transition: width 0.05s ease-out;-moz-transition: width 0.05s ease-out;-ms-transition: width 0.05s ease-out;-o-transition: width 0.05s ase-out;transition: width 0.05s ease-out;}.mask_b{position: absolute;overflow: hidden;width: 100%;height: 100%;left: 0;top: 0;background: rgba(0,0,0,.3);}.mask_b:hover{background: none;}.text{color: #fff;width: 30px;margin: 0 auto;display: block;font: 30px/30px Microsoft Yahei;position: relative;padding: 30px 0 0 0;}li:hover{width:400px;}ul:hover li:not(:hover){width:160px;}ul:hover li:hover .text{display: none;}.pic-auto{height: 100%;}.pic-auto1{background: url(http://img.elongstatic.com/index/ifold/20150120_ifold1.jpg) no-repeat center 0;}.pic-auto2{background: url(http://img.elongstatic.com/index/ifold/20150120_ifold2.jpg) no-repeat center 0;}.pic-auto3{background: url(http://img.elongstatic.com/index/ifold/20150120_ifold3.jpg) no-repeat center 0;}.pic-auto4{background: url(http://img.elongstatic.com/index/ifold/20150120_ifold4.jpg) no-repeat center 0;}.pic-auto5{background: url(http://img.elongstatic.com/index/ifold/20150120_ifold5.jpg) no-repeat center 0;}.pic-auto6{background: url(http://img.elongstatic.com/index/ifold/20150120_ifold6.jpg) no-repeat center 0;}</style> </head> <body> <ul><li><a href="#"><div class="mask_b"><span class="text">園林酒店</span></div><div class="pic-auto pic-auto1"></div></a></li><li><a href="#"><div class="mask_b"><span class="text">情侶酒店</span></div> <div class="pic-auto pic-auto2"></div></a></li><li><a href="#"><div class="mask_b"><span class="text">設計師酒店</span></div><div class="pic-auto pic-auto3"></div></a></li><li><a href="#"><div class="mask_b"><span class="text">青年旅社</span></div><div class="pic-auto pic-auto4"></div></a></li><li><a href="#"><div class="mask_b"><span class="text">特色客棧</span></div> <div class="pic-auto pic-auto5"></div></a></li><li><a href="#"><div class="mask_b"><span class="text">海島酒店</span></div> <div class="pic-auto pic-auto6"></div></a></li> </ul> </body> </html>轉載于:https://www.cnblogs.com/fangfeiyue/p/7382497.html
總結
以上是生活随笔為你收集整理的CSS仿艺龙首页鼠标移入图片放大的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows下Call to unde
- 下一篇： Android 手把手带你玩转自己定义相