网页效果中经常会用到图片的hover效果，ImageHover.css 这个库为我们提供了多种的效果。
兼容性
插件是使用css3书写的，所以最好是对css3支持比较好的浏览器。如果需要考虑到兼容性问题，那么建议使用我自己写的jq版效果，虽然效果单一，但是兼容性更好。
效果演示地址
Demo：http://weber.pub/demo/160919/index.html
下载
直接下载
github地址
github 地址：https://github.com/ciar4n/imagehover.css
Bower安装
bower install imagehover.css使用
1、在页面的
head部位引入插件
<head>
<link rel="stylesheet" href="css/imagehover.min.css">
</head>2、HTML代码
其中figure标签的class imghvr-fade就是对应的 CSS hover 效果，这个 Class 名称可以查看演示页:http://weber.pub/demo/160919/index.html
<figure class="imghvr-fade">
<img src="#">
<figcaption>
// Hover Content
</figcaption>
</figure>3、如果图片上需要添加链接，这时
html代码如下
<figure class="imghvr-fade">
<img src="#">
<figcaption>
// Hover Content
</figcaption>
<a href="http://www.imagehover.io"></a>
</figure>4、统一修改
hover效果的背景颜色
修改 imagehover.css 文件
[class^=‘imghvr-‘],
[class*=‘ imghvr-‘] {
background-color: #D14233;
}5、单独修改某个
hover效果代码
<figure class="imghvr-fade" style="background-color:#D14233;">
<img src="#">
<figcaption>
// Hover Content
</figcaption>
</figure>演示地址：http://weber.pub/demo/160919/index.html
部分演示代码
<div class="demo">
<figure class="imghvr-zoom-out-down"><img src="example-image.jpg" alt="example-image">
<figcaption>
<h3>Weber.pub</h3>
<p>Web开发者，努力学习中</p>
</figcaption><a href="javascript:;"></a>
</figure>
<textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-down</textarea>
</div>结尾
by Weber.pub
