这是一款简单的css3鼠标悬停图文列表动画效果，橙色背景上下一起滑入，文字变色，适用于大部分的网站图文排版的动态特效。

CSS3样式

在页面引入以下CSS3样式代码

<style>
*{padding:0;margin:0}
body{font-size:12px;line-height:2;}
ul,li{list-style:none;}
#plist{width:900px;margin:100px auto;}
#plist li{width:280px;height:290px;margin-right:20px;float:left; position:relative;z-index:10;overflow:hidden; transition:all 500ms}
#plist li .mask{width:280px;height:160px;overflow:hidden;position:absolute;left:0;top:-160px;z-index:20;transition:all 500ms;background:#0082df;opacity:.5}
#plist li img{width:280px;height:160px;}
#plist li div.box{padding:15px; position:relative; z-index:11}
#plist li h3{font-size:12px;}
#plist li .csbg{width:280px;height:130px;background:#0082df;position:absolute;left:0;bottom:-130px;z-index:5;transition:all 500ms}
#plist li:hover {color:#fff;}
#plist li:hover .mask{top:0px;}
#plist li:hover .csbg{bottom:0px}
</style>