[CSS3技术]CSS3实现简单的动画图片说明效果

图片：105805apkz7ykan709m0kp.jpg

.container{
height:200px;width:400px;
background:#000;
overflow:hidden;
position:relative;
}
.text{
background:rgba(0,0,0,0.5);
top:-70px;
color:white;
font:14px Georgia,serif;
height:auto;width:inherit;
position:absolute;
/* CSS3 Transition Magic */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.text a{
color:#fff;
display:block;
padding:15px;
text-decoration:none;
/* CSS3 Transition Magic */
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}
.text a:hover{
color:red;
text-decoration:none;
}
.container:hover .text{
top:0;
}

在线演示：http://www.aspxcs.net/index.php?m=content&c=index&a=down_file&id=788

本地下载：http://www.aspxcs.net/index.php?m=content&c=down&a_k=11a0UgRUUggGBwAACVUADQNSAAMMU10IUlUAVVBcBA8OCxIRCUIPBQcRVg1REkBFWEkdQ09BFlkSQ05UEhtXXUIcQRJYCwNcUF5cVRZUBARQSQIGCQMXClECBAdTBAwIDwYFUgdSVgsYTVlAHwIJBEQLXVBdWlFcXAEQVABBUFwLAgQ