8种炫酷CSS3鼠标滑过图片标题动画特效

这是一组使用CSS3制作的超酷鼠标滑过图片标题动画特效。这组特效中共有8种不同的鼠标滑过效果，它们都是通过CSS3 transform来制作遮罩层的各种动画特效。

使用方法

在页面中引入imghover.css文件。

<link rel="stylesheet" type="text/css" href="css/imghover.css">>                
                

HTML结构

这组鼠标滑过图片动画特效的HTML结构非常简单，如下：

<figure class="imghvr-book-open-horiz">
  <img src="#">
  <figcaption>
    // 鼠标滑过显示的内容
  </figcaption>
  <a href="#"></a>
</figure>
                

CSS样式

在figure元素上添加你想要的鼠标滑过效果的class类即可使用这种效果。可用的class类有：

• imghvr-book-open-horiz
• imghvr-strip-shutter-right
• imghvr-throw-in-left
• imghvr-blocks-zoom-top-left
• imghvr-border-reveal-top-left
• imghvr-cube-left
• imghvr-blocks-rotate-in-left
• imghvr-dive-cc