<!DOCTYPE>
<html>
<head>
<title>Document</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0px auto;
padding:0px;
}
.wrapper{
width:200px;
height:200px;
padding:10px;
background:#FF3333;
margin-top:100px;
}
.box1{
width:200px;
height:200px;
background:#6666FF;
position:relative;
overflow:hidden;
}
img{
width:200px;
height:200px;
background:rgba(187,187,187,0.5);
}
.shadow{
width:200px;
height:65px;
background:rgba(125,125,125,0.4);
position:absolute;
bottom:-65px; 改为 left:-200px;
改为 bottom:0px;
}
.box1:hover .shadow{
bottom:0px; 改为 left:0px;//整体效果是文字介绍部分从左边往左进入
transition:all 1s ease;//整体的效果是文字介绍部分会从底部往上
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">
<img src="images/1.png" />
<div class="shadow">
<span>据中国之声《央广新闻》报道,近日来,关于《海南澄迈一名官员开会</span>
</div>
</div>
</div>
</body>
</html>
原文：http://www.cnblogs.com/xiaoyunyun/p/4943133.html