图片放上效果ImageHover.css
2021-03-29 16:27
网页效果中经常会用到图片的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
部位引入插件
2、HTML代码
其中figure
标签的class
imghvr-fade
就是对应的 CSS hover
效果,这个 Class
名称可以查看演示页:http://weber.pub/demo/160919/index.html
3、如果图片上需要添加链接,这时
html
代码如下
4、统一修改
hover
效果的背景颜色
修改 imagehover.css
文件
[class^=‘imghvr-‘],
[class*=‘ imghvr-‘] {
background-color: #D14233;
}
5、单独修改某个
hover
效果代码
演示地址:http://weber.pub/demo/160919/index.html
部分演示代码
结尾
by Weber.pub
本文地址:http://weber.pub/图片放上效果imagehover-css/205.html
文章标题:图片放上效果ImageHover.css
文章链接:http://soscw.com/index.php/essay/69598.html