仿照京东做的一个鼠标移上去的图片文字说明效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ padding:0; margin:0;} .sd { width:210px; height:110px; border:solid 2px #ccc; position:relative; margin-top:50px; margin-left:100px; } .sd span { display:block; width:100%; height:100%; overflow:hidden; position:relative;} .sd span img {-webkit-transition: all .35s; top:0px; position:absolute;} p{ position:absolute; bottom:0px; height:30px; line-height:30px; font-size:12px; text-indent:10px; opacity:0; background-color:rgba(0,0,0,.4); color:#fff; width:100%; z-index:3; -webkit-transition:all 0.3s ease 0; -webkit-transform: perspective(300px) rotateX(-90deg) ; -webkit-transform-origin: 50% 100%; -webkit-transition: all .35s;} .sd:hover p { -webkit-transform: perspective(300px) rotateX(0deg);opacity:1; } .sd:hover span img { top:-30px; } </style> </head> <body> <div class="sd"> <span><img src="huiyuangou+_17.jpg" width="210" height="110" /></span> <p>文字说明</p> </div> </body> </html>
效果还是蛮不错的，推荐以后使用
