CSS3实现简单的动画图片说明效果

CSS3实现简单的动画图片说明效果

.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

【CSS3实现简单的动画图片说明效果】相关文章

1. CSS3实现简单的动画图片说明效果

2. jQuery/CSS3实现超酷的动画Tab菜单

3. jQuery/CSS3实现超酷的动画Tab菜单

4. CSS3 HTML5实例四(使用 RGBA 实现透明效果)

5. CSS3实现的图片加载动画效果

6. 一个简单的CSS3文字动画插件textillate

7. 超简单的纯CSS3加载中效果

8. 用纯CSS3实现图片幻灯片切换效果

9. 效果非常酷！纯CSS3实现的图片滑块程序

10. CSS3属性的快速说明信息图

本文来源：https://www.51html5.com/a1011.html