这是一款效果超酷的纯CSS3鼠标滑过图片动画效果，它共分为8组不同的效果，它们分别在鼠标滑过图片时，以不同的方式显示遮罩层和图片标题。每一组效果又分为3种不同的鼠标滑过图片效果。

这些鼠标滑过图片时的动画效果都是使用CSS3来完成的，分别有：滑动效果，倾斜效果，翻转效果，旋转效果等等，下面是一张GIF的预览图片。

在线预览    源码下载

使用方法

在页面中引入hover-effects.css文件。

CSS Code 复制内容到剪贴板 <link rel="stylesheet" href="css/hover-effects.css" />              

HTML结构

以其中一种鼠标滑过图片动画效果为例，它的HTML结构如下：

XML/HTML Code 复制内容到剪贴板 <div class="effect-1">       < div   class = "image-box" >           < img   src = "img-2.jpg"   alt = "Image-3" >        </ div >        < div   class = "text-desc" >           < h3 > Your Title </ h3 >           < p > ...... </ p >           < a   href = "#"   class = "btn" > Learn more </ a >        </ div >    </ div >               

CSS样式

CSS Code 复制内容到剪贴板 .effect-1{       float :  left ;        width :  340px ;        position :  relative ;        overflow :  hidden ;        text-align :  center ;        border :  4px   solid  rgba(255, 255, 255, 0.9);        overflow :  visible ;    }    .effect-1 img{      transition: 0.5s;    }    .effect- 1: hover img{      transform: scale(0.3) translateY(-110%);       position :  relative ;        z-index : 9;    } .effect-1 .text-desc{      transform: translateY(100%);       opacity: 0;        padding :  85px   20px   10px ;       transition: 0.5s;    } .effect- 1: hover .text-desc{      transform: translateY( 0px );       opacity: 1;    }        

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/w2bc/p/5279180.html