这是一组使用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