图片放上效果ImageHover.css

最新推荐文章于 2024-05-16 09:53:34 发布

canglingyue

最新推荐文章于 2024-05-16 09:53:34 发布

阅读量2.5k

点赞数 1

分类专栏： html+css 文章标签： css3 图片插件

本文链接：https://blog.csdn.net/canglingyue/article/details/52588139

版权

html+css 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

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

canglingyue

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片放上效果ImageHover.css

网页效果中经常会用到图片的hover效果，ImageHover.css 这个库为我们提供了多种的效果。兼容性插件是使用css3书写的，所以最好是对css3支持比较好的浏览器。如果需要考虑到兼容性问题，那么建议使用我自己写的jq版效果，虽然效果单一，但是兼容性更好。效果演示地址Demo：http://weber.pub/demo/160919/index.html下载直接下载链接：http://
复制链接

扫一扫

专栏目录