您的位置：首页 > Web前端 > CSS

图片放上效果ImageHover.css

2016-09-19 18:20 204 查看
网页效果中经常会用到图片的hover效果，ImageHover.css 这个库为我们提供了多种的效果。

兼容性

插件是使用
css3
书写的，所以最好是对
css3
支持比较好的浏览器。如果需要考虑到兼容性问题，那么建议使用我自己写的
jq版效果
，虽然效果单一，但是兼容性更好。

效果演示地址



Demo
：http://weber.pub/demo/160919/index.html

下载

直接下载

链接：http://imagehover.io/

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

本文地址：http://weber.pub/图片放上效果imagehover-css/205.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3 图片 插件
相关文章推荐
新的分享
章节导航