hover实现伪元素无HTML弹出效果2
还有一种效果也是hover结合befor实现的，但是你们会发现有趣的是，我并没有创建一个dom来存放图片的描述。
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding: 0px;
}
.main{
width:600px;
margin:0 auto;
}
.main ul li{
width: 180px;
float: left;
margin-right: 10px;
list-style-type: none;
position: relative;
margin-top: 10px;
}
.main ul li a{
display: block;
text-decoration: none;
}
.main ul li a>img{
width: 100%;
height: 100%;
display: block;
z-index: -1;
}
ul a:hover{
display: block;
outline: none;
-moz-box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 5px #000;
box-shadow: 3px 3px 5px #000;
}
ul a:hover img {
outline: 3px solid #ccc; /*outline是不占用边框宽度的*/
}
ul a:hover:before {
content: attr(title); /*取title内容*/
color: #000;
position: absolute;
bottom: 0;
height: 30px;
line-height: 30px;
text-align: center;
font-weight: bold;
width: 100%;
background: rgba(255,255,255,0.7);
background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.7)), to(rgba(204,204,204,0.7))); /* Safari */
display: block;
text-shadow: 1px 1px 1px #fff;
}
ul a.top:hover:before {
top:0px;
}
ul a.center:hover:before {
top:45%;
}
ul a.left:hover:before {
left: 0px;
top:0px;
height: 100%;
width: 50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
text-align: left;
word-wrap:break-word; /*自动换行*/
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>
<a href="" title="11111111111112222">
<img src="img/222.jpg" alt="11111111" />
</a>
</li>
<li>
<a class="top" href="" title="222222222222223">
<img src="img/333.jpg" alt="22222222" />
</a>
</li>
<li>
<a class="center" href="" title="4444444444555">
<img src="img/111.jpg" alt="333333333" />
</a>
</li>
<li>
<a class="left" href="" title="4444444444555">
<img src="img/111.jpg" alt="333333333" />
</a>
</li>
<li>
<a href="" title="4444444444555">
<img src="img/111.jpg" alt="333333333" />
</a>
</li>
</ul>
</div>
</body>
</html>