最新消息：
    你的位置：爱上JQuery > 前端知识 > CSS模块 > CSS第9款：Imagehover.css 纯CSS打造的图片悬停效果

    CSS第9款：Imagehover.css 纯CSS打造的图片悬停效果

    CSS模块 杨红伟 8647浏览

    用过很多图片县停效果，说实在话，很多都不好用。我大致说一下原因：

    1、对基础CSS影响比较大；
    2、附加的插件太多；
    3、还要引用有一些JS。

    而CSS3的诞生，对我们前端开发来说，有了质的飞跃！下边就讲一下这个 ImageHover.css ，它实现这样或才那样的效果特别方便！

    mark

    一：下载地址

    https://github.com/ciar4n/imagehover.css

    二：演示地址

    http://www.imagehover.io/

    三：最简单例子

    主要看下边的代码！简单的不能不能的，我这里就不讲了！

    <link href="https://cdnjs.cloudflare.com/ajax/libs/imagehover.css/1.0/css/imagehover.min.css" rel="stylesheet" media="all">

<figure class="imghvr-fade">
    <img src="example-image.jpg" alt="example-image">
    <figcaption>
    <h3>图片标题</h3>
    <p>图片简介：这是一个例子！</p>
    </figcaption>
    <a href="javascript:;"></a>
</figure>

    四：特效样式

    注：只要把 imghvr-fade 更改成下边的样式即可！

    <figure class="imghvr-fade"></figure>

    下边是全部的免费样式！一共44个免费的样式！官方总共有216个样式，不过得19刀！

    1、fade 褪色 (1个)

    样式 说明
    imghvr-fade 褪色

    2、push 推 (4个)

    样式 说明
    imghvr-push-up 向上推
    imghvr-push-down 向下推
    imghvr-push-left 向左推
    imghvr-push-right 向右推

    3、slide 滑动 (4个)

    样式 说明
    imghvr-slide-up 向上滑动
    imghvr-slide-down 向下滑动
    imghvr-slide-left 向左滑动
    imghvr-slide-right 向右滑动

    4、reveal 揭开 (4个)

    样式 说明
    imghvr-reveal-up 向上揭开
    imghvr-reveal-down 向下揭开
    imghvr-reveal-left 向左揭开
    imghvr-reveal-right 向右揭开

    5、hinge 合页 (4个)

    样式 说明
    imghvr-hinge-up 向上合页
    imghvr-hinge-down 向下合页
    imghvr-hinge-left 向左合页
    imghvr-hinge-right 向右合页

    6、flip 翻动 (4个)

    样式 说明
    imghvr-flip-horiz 水平翻动
    imghvr-flip-vert 垂直翻动
    imghvr-flip-diag-1 左角翻动
    imghvr-flip-diag-2 右角翻动

    7、shutter 快门 (10个)

    样式 说明
    imghvr-shutter-out-horiz 水平往外快门
    imghvr-shutter-out-vert 垂直往外快门
    imghvr-shutter-out-diag-1 右斜角快门
    imghvr-shutter-out-diag-2 左斜角快门
    imghvr-shutter-in-horiz 水平往里快门
    imghvr-shutter-in-vert 垂直往里快门
    imghvr-shutter-in-out-horiz 水平往里、往外快门
    imghvr-shutter-in-out-vert 垂直往里、往外快门
    imghvr-shutter-in-out-diag-1 左斜角往里、往外快门
    imghvr-shutter-in-out-diag-2 右斜角往里、往外快门

    8、fold 折叠 (4个)

    样式 说明
    imghvr-fold-up 向上折叠
    imghvr-fold-down 向下折叠
    imghvr-fold-left 向左折叠
    imghvr-fold-right 向右折叠

    9、zoom 放大 (9个)

    样式 说明
    imghvr-zoom-in 里向外放大
    imghvr-zoom-out 先变小再放大
    imghvr-zoom-out-up 向先上再放大
    imghvr-zoom-out-down 先向下再放大
    imghvr-zoom-out-left 先向左再放大
    imghvr-zoom-out-right 先向右再放大
    imghvr-zoom-out-flip-horiz 翻转垂直放大
    imghvr-zoom-out-flip-vert 翻转水平放大

    10、blur 模糊 (1个)

    样式 说明
    imghvr-blur 模糊

    与本文相关的文章