核心提示：图文列表鼠标经过显示详情代码实例（如图效果）htmlheadmeta charset=utf-8 /title图文列表鼠标经过显示详情/titlestyle type=text/css.style1 ...
图文列表鼠标经过显示详情代码实例（如图效果）
<html>
<head>
<meta charset="utf-8" />
<title>图文列表鼠标经过显示详情</title>
<style type="text/css">
.style1 ul li{float:left;margin:0 6px;position:relative;list-style:none}
.style1 ul li img{width: 170px;height: 120px;}
.style1 ul li span{background:rgba(0, 0, 0, 0.5);overflow:hidden;/*内部文字溢出隐藏*/
height:23px;
color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 0px;width: 170px;left:0;font-size:12px;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;}
.style1 ul li:hover span{ height:100px;}
</style>
</head>
<body>
<body class="content">
<p class="style1 ">
<h2>图文列表鼠标经过显示详情</h2>
<ul>
<li><img src=/uploadfile/2017/1120/20171120013404629.jpg"><span>鼠标悬停图片变大文字消失鼠标悬停图片变大文字消失鼠标悬停图片变大文字消失鼠标悬停图片变大文字消失</span></li>
<li><img src=/uploadfile/2017/1120/20171120013404629.jpg"><span>鼠标悬停图片变大文字消失</span></li>
<li><img src=/uploadfile/2017/1120/20171120013404629.jpg"><span>鼠标悬停图片变大文字消失</span></li>
<li><img src=/uploadfile/2017/1120/20171120013404629.jpg"><span>鼠标悬停图片变大文字消失</span></li>
</ul>
</p>
</body>
</html>
