图片放上效果ImageHover.css

网页效果中经常会用到图片的hover效果，ImageHover.css 这个库为我们提供了多种的效果。

兼容性

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

效果演示地址

下载

直接下载

链接：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 名称

<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>

部分演示代码

<div class="demo"><figure class="imghvr-zoom-out-down"><img src="example-image.jpg" alt="example-image"><figcaption><h3>Weber</h3><p>Web开发者，努力学习中</p></figcaption><a href="javascript:;"></a></figure><textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-down</textarea>
</div>

图片放上效果ImageHover.css相关推荐

JQ版图片的鼠标放上效果
网页效果中经常会用到图片的hover效果,本文中展示的是使用Jquery书写的效果,相比较ImageHover.css兼容性更好. 兼容性插件是使用jquery书写的,所以兼容性比ImageHove ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
html图片实现丝带效果,html+css做的丝带标签
先上效果: HTML: 2016.05.24 CSS: .tag { width: 100%; border-right: 1px solid #DDD; -moz-border-radius: 4p ...
鼠标悬停效果imagehover.css和ihover.css(效果酷炫）
imagehover.css 效果展示链接:http://www.shejidaren.com/examples/imagehover-css/index.html ihover(这个效果更加酷炫) ...
鼠标滑过图片抖动晃动效果（css/Shake）
别人网站上看到鼠标经过图片左右抖动晃动的特效,自己也想弄一个,查了查是用到的就是CSS3的特性--Shake Shake使用SASS编写,利用它我们可以实现多种不同样式的抖动效果.这是一个很微小的动画 ...
html hover图片效果,CSS第9款：Imagehover.css 纯CSS打造的图片悬停效果
用过很多图片县停效果,说实在话,很多都不好用.我大致说一下原因: 1.对基础CSS影响比较大: 2.附加的插件太多: 3.还要引用有一些JS. 而CSS3的诞生,对我们前端开发来说,有了质的飞跃!下边 ...
css中在图片上加透明,css 给图片添加滤镜效果，透明层毛玻璃效果
我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果原图添加sepia滤镜的效果 img{ width:100%; transition: .5s filter; filt ...
4种方式实现鼠标放上图片变大效果
1.利用改变宽度的形式来实现通过鼠标放上将宽度增大来实现整个页面的变大.但是现实的效果会是从左上角开始增大的. 鼠标未放上的时候第一种方式鼠标放上去的时候 2.利用translateZ实现变化后 ...
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...

图片放上效果ImageHover.css

兼容性

效果演示地址

下载

使用

图片放上效果ImageHover.css相关推荐

最新文章

热门文章