今天给大家分享30款css3实现的鼠标经过图片显示描述特效，鼠标经过这些图片的时候以非常炫的方式显示图片的描述。为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

在线预览   源码下载

实现的代码。

html代码：

 <div class="container">

        <!-- Top Navigation -->

        <header class="codrops-header">

                <h1>Hover Effect Ideas <span>An inspirational collection of subtle hover effects</span></h1>

                <nav class="codrops-demos">

                    <a class="current-demo" href="index.html">Set 1</a>

                    <a href="index2.html">Set 2</a>

                </nav>

            </header>

        <div class="content">

            <h2>

                Lily</h2>

            <div class="grid">

                <figure class="effect-lily">

                        <img src="img/12.jpg" alt="img12"/>

                        <figcaption>

                            <div>

                                <h2>Nice <span>Lily</span></h2>

                                <p>Lily likes to play with crayons and pencils</p>

                            </div>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-lily">

                        <img src="img/1.jpg" alt="img1"/>

                        <figcaption>

                            <div>

                                <h2>Nice <span>Lily</span></h2>

                                <p>Lily likes to play with crayons and pencils</p>

                            </div>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Sadie</h2>

            <div class="grid">

                <figure class="effect-sadie">

                        <img src="img/2.jpg" alt="img02"/>

                        <figcaption>

                            <h2>Holy <span>Sadie</span></h2>

                            <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-sadie">

                        <img src="img/14.jpg" alt="img14"/>

                        <figcaption>

                            <h2>Holy <span>Sadie</span></h2>

                            <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Honey</h2>

            <div class="grid">

                <figure class="effect-honey">

                        <img src="img/4.jpg" alt="img04"/>

                        <figcaption>

                            <h2>Dreamy <span>Honey</span> <i>Now</i></h2>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-honey">

                        <img src="img/5.jpg" alt="img05"/>

                        <figcaption>

                            <h2>Dreamy <span>Honey</span> <i>Now</i></h2>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Layla</h2>

            <div class="grid">

                <figure class="effect-layla">

                        <img src="img/6.jpg" alt="img06"/>

                        <figcaption>

                            <h2>Crazy <span>Layla</span></h2>

                            <p>When Layla appears, she brings an eternal summer along.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-layla">

                        <img src="img/3.jpg" alt="img03"/>

                        <figcaption>

                            <h2>Crazy <span>Layla</span></h2>

                            <p>When Layla appears, she brings an eternal summer along.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Zoe</h2>

            <div class="grid">

                <figure class="effect-zoe">

                        <img src="img/25.jpg" alt="img25"/>

                        <figcaption>

                            <h2>Creative <span>Zoe</span></h2>

                            <p class="icon-links">

                                <a href="#"><span class="icon-heart"></span></a>

                                <a href="#"><span class="icon-eye"></span></a>

                                <a href="#"><span class="icon-paper-clip"></span></a>

                            </p>

                            <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>

                        </figcaption>

                    </figure>

                <figure class="effect-zoe">

                        <img src="img/26.jpg" alt="img26"/>

                        <figcaption>

                            <h2>Creative <span>Zoe</span></h2>

                            <p class="icon-links">

                                <a href="#"><span class="icon-heart"></span></a>

                                <a href="#"><span class="icon-eye"></span></a>

                                <a href="#"><span class="icon-paper-clip"></span></a>

                            </p>

                            <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Oscar</h2>

            <div class="grid">

                <figure class="effect-oscar">

                        <img src="img/9.jpg" alt="img09"/>

                        <figcaption>

                            <h2>Warm <span>Oscar</span></h2>

                            <p>Oscar is a decent man. He used to clean porches with pleasure.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-oscar">

                        <img src="img/10.jpg" alt="img10"/>

                        <figcaption>

                            <h2>Warm <span>Oscar</span></h2>

                            <p>Oscar is a decent man. He used to clean porches with pleasure.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Marley</h2>

            <div class="grid">

                <figure class="effect-marley">

                        <img src="img/11.jpg" alt="img11"/>

                        <figcaption>

                            <h2>Sweet <span>Marley</span></h2>

                            <p>Marley tried to convince her but she was not interested.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-marley">

                        <img src="img/12.jpg" alt="img12"/>

                        <figcaption>

                            <h2>Sweet <span>Marley</span></h2>

                            <p>Marley tried to convince her but she was not interested.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Ruby</h2>

            <div class="grid">

                <figure class="effect-ruby">

                        <img src="img/13.jpg" alt="img13"/>

                        <figcaption>

                            <h2>Glowing <span>Ruby</span></h2>

                            <p>Ruby did not need any help. Everybody knew that.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-ruby">

                        <img src="img/14.jpg" alt="img14"/>

                        <figcaption>

                            <h2>Glowing <span>Ruby</span></h2>

                            <p>Ruby did not need any help. Everybody knew that.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Roxy</h2>

            <div class="grid">

                <figure class="effect-roxy">

                        <img src="img/15.jpg" alt="img15"/>

                        <figcaption>

                            <h2>Charming <span>Roxy</span></h2>

                            <p>Roxy was my best friend. She'd cross any border for me.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-roxy">

                        <img src="img/1.jpg" alt="img01"/>

                        <figcaption>

                            <h2>Charming <span>Roxy</span></h2>

                            <p>Roxy was my best friend. She'd cross any border for me.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Bubba</h2>

            <div class="grid">

                <figure class="effect-bubba">

                        <img src="img/2.jpg" alt="img02"/>

                        <figcaption>

                            <h2>Fresh <span>Bubba</span></h2>

                            <p>Bubba likes to appear out of thin air.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-bubba">

                        <img src="img/16.jpg" alt="img16"/>

                        <figcaption>

                            <h2>Fresh <span>Bubba</span></h2>

                            <p>Bubba likes to appear out of thin air.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Romeo</h2>

            <div class="grid">

                <figure class="effect-romeo">

                        <img src="img/17.jpg" alt="img17"/>

                        <figcaption>

                            <h2>Wild <span>Romeo</span></h2>

                            <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-romeo">

                        <img src="img/18.jpg" alt="img18"/>

                        <figcaption>

                            <h2>Wild <span>Romeo</span></h2>

                            <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Dexter</h2>

            <div class="grid">

                <figure class="effect-dexter">

                        <img src="img/19.jpg" alt="img19"/>

                        <figcaption>

                            <h2>Strange <span>Dexter</span></h2>

                            <p>Dexter had his own strange way. You could watch him training ants.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-dexter">

                        <img src="img/12.jpg" alt="img12"/>

                        <figcaption>

                            <h2>Strange <span>Dexter</span></h2>

                            <p>Dexter had his own strange way. You could watch him training ants.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Sarah</h2>

            <div class="grid">

                <figure class="effect-sarah">

                        <img src="img/13.jpg" alt="img13"/>

                        <figcaption>

                            <h2>Free <span>Sarah</span></h2>

                            <p>Sarah likes to watch clouds. She's quite depressed.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-sarah">

                        <img src="img/20.jpg" alt="img20"/>

                        <figcaption>

                            <h2>Free <span>Sarah</span></h2>

                            <p>Sarah likes to watch clouds. She's quite depressed.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Chico</h2>

            <div class="grid">

                <figure class="effect-chico">

                        <img src="img/15.jpg" alt="img15"/>

                        <figcaption>

                            <h2>Silly <span>Chico</span></h2>

                            <p>Chico's main fear was missing the morning bus.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-chico">

                        <img src="img/4.jpg" alt="img04"/>

                        <figcaption>

                            <h2>Silly <span>Chico</span></h2>

                            <p>Chico's main fear was missing the morning bus.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

            <h2>

                Milo</h2>

            <div class="grid">

                <figure class="effect-milo">

                        <img src="img/11.jpg" alt="img11"/>

                        <figcaption>

                            <h2>Faithful <span>Milo</span></h2>

                            <p>Milo went to the woods. He took a fun ride and never came back.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

                <figure class="effect-milo">

                        <img src="img/3.jpg" alt="img03"/>

                        <figcaption>

                            <h2>Faithful <span>Milo</span></h2>

                            <p>Milo went to the woods. He took a fun ride and never came back.</p>

                            <a href="#">View more</a>

                        </figcaption>

                    </figure>

            </div>

        </div>

        <nav class="codrops-demos">

                <a class="current-demo" href="index.html">Set 1</a>

                <a href="index2.html">Set 2</a>

            </nav>

        <!-- Related demos -->

    </div>

via：http://www.w2bc.com/Article/19556

30款css3实现的鼠标经过图片显示描述特效的更多相关文章

  1. 纯css3鼠标经过图片显示描述特效

    http://***/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览   ...

  2. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  3. 一款基于jquery的鼠标经过图片列表特效

    今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览   源码下载 实现的代码 html代码: < ...

  4. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  5. 基于css3的鼠标经过动画显示详情特效

    之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于css3的鼠标经过动画显示详情特效.这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下: 在线预览   源码下载 ...

  6. css3实现小米商城鼠标移动图片上浮阴影效果

    今天在编程爱好者编码库看见一个好玩的程序,代码如下. <!DOCTYPE html> <html> <head>     <meta charset=&quo ...

  7. 通过CSS3实现：鼠标悬停图片360度旋转效果

    效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...

  8. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery 鼠标移入图片 显示大图并跟随鼠标移动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 使用JavaMail API发送邮件

    发送邮件是很常用的功能,注册验证,找回密码,到货通知,欠费提醒等,都可以通过邮件来提醒. Java中发送邮件需要使用javax.mail.jar包,读者可以上网搜索或去官方下载,下载地址为: 下面贴上 ...

  2. Hadoop入门简介

    一.Hadoop简介 1.1.Hadoop主要进行分布式存储和分布式计算 1.1-1.HDFS:分布式文件系统 1.1-2.MapReduce:并行计算框架 1.2.Hadoop用来做什么? 搭建大型 ...

  3. IOS中 什么是UITableView的索引放大镜字符

    IOS中 什么是UITableView的索引放大镜字符 [_dataSource addObject:UITableViewIndexSearch]; 版权声明:本文为博主原创文章,未经博主允许不得转 ...

  4. 扩展UIColor类

    在开发中,UI给出的颜色值有时候是十六进制的,有时候给出的是RGB(255,255,255)这样的形式的,而iOS系统提供的方法中并没有直接传递这两种值返回UIColor对象的,这里自己封装了一个以便 ...

  5. [cocos2d-js]chipmunk例子（二）

    ; ; ; ; <<; var NOT_GRABABLE_MASK = ~GRABABLE_MASK_BIT; var MainLayer = cc.Layer.extend({ _bal ...

  6. 第三百四十二天 how can I 坚持

    再问世间都去哪儿了,天气预报没搞完,计划没制定,又周三了. 今天回到家八点,吃完饭接近九点,和老妈开了会视频,这就九点半多了,发了呆洗了个碗就到这时候了,整天浑浑噩噩的,该如何是好. 又有点上火,舌头 ...

  7. 第一百九十六天 how can I 坚持

    老妈邮的咸菜到了,美味啊,买不到,哈哈. 以后要勤给鱼换水啊,10天不换,水都臭了,拒绝懒惰. 明天要回济南了,刘松结婚,估计又没法发博客了. 两条鱼,一条罗娜,一条我,哈哈. 睡觉.

  8. 第二百三十三天 how can I 坚持

    刚才看了场球,亚冠恒大和迪拜阿尔阿赫利,1:0,刚打开电脑就看到了进球,还是很幸运的. 在家待了一天,阴天,预报明天又中到大雪 啊,下吧.好希望下场大雪啊. 最近一直感觉好累,写代码不容易啊 ,还是因 ...

  9. MYSQL数据库重点：流程控制语句

    1.BEGIN ... END复合语句:包含多个语句.statement_list 代表一个或多个语句的列表.statement_list之内每个语句都必须用分号(:)来结尾. [begin_labe ...

  10. Dagger学习笔记

    @Inject 提供依赖的构造函数,或者需要依赖的成员变量 @Module 提供依赖,实例化的地方( 使用module实例化,方便测试的时候替换成其他对象,而这也是和构造方法注入的区别,如果用构造方法 ...