首页 > 代码库 > 仿照京东做的一个鼠标移上去的图片文字说明效果

仿照京东做的一个鼠标移上去的图片文字说明效果

2024-07-02 06:30:01   225人阅读

<!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>

效果还是蛮不错的，推荐以后使用


联系
我们