图片放上效果ImageHover.css

2021-03-29 16:27

阅读:616

网页效果中经常会用到图片的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

// Hover Content
  • 3、如果图片上需要添加链接,这时html 代码如下

// Hover Content
  • 4、统一修改hover效果的背景颜色

修改 imagehover.css 文件

[class^=‘imghvr-‘],
[class*=‘ imghvr-‘] {
  background-color: #D14233;
}
  • 5、单独修改某个hover效果代码

// Hover Content

演示地址:http://weber.pub/demo/160919/index.html

部分演示代码

example-image

Weber.pub

Web开发者,努力学习中

结尾

by Weber.pub

本文地址:http://weber.pub/图片放上效果imagehover-css/205.html


评论


亲,登录后才可以留言!