CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 30款css3实现的鼠标经过图片显示描述特效

30款css3实现的鼠标经过图片显示描述特效

CSS3教程  手机阅读

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

在线预览

30款css3实现的鼠标经过图片显示描述特效.rar

实现的代码。

html代码:

  1. <div class="container">
  2.         <!-- Top Navigation -->
  3.         <header class="codrops-header">
  4.                 <h1>Hover Effect Ideas <span>An inspirational collection of subtle hover effects</span></h1>
  5.                 <nav class="codrops-demos">
  6.                     <a class="current-demo" href="index.html">Set 1</a>
  7.                     <a href="index2.html">Set 2</a>
  8.                 </nav>
  9.             </header>
  10.         <div class="content">
  11.             <h2>
  12.                 Lily</h2>
  13.             <div class="grid">
  14.                 <figure class="effect-lily">
  15.                         <img src="img/12.jpg" alt="img12"/>
  16.                         <figcaption>
  17.                             <div>
  18.                                 <h2>Nice <span>Lily</span></h2>
  19.                                 <p>Lily likes to play with crayons and pencils</p>
  20.                             </div>
  21.                             <a href="#">View more</a>
  22.                         </figcaption>            
  23.                     </figure>
  24.                 <figure class="effect-lily">
  25.                         <img src="img/1.jpg" alt="img1"/>
  26.                         <figcaption>
  27.                             <div>
  28.                                 <h2>Nice <span>Lily</span></h2>
  29.                                 <p>Lily likes to play with crayons and pencils</p>
  30.                             </div>
  31.                             <a href="#">View more</a>
  32.                         </figcaption>            
  33.                     </figure>
  34.             </div>
  35.             <h2>
  36.                 Sadie</h2>
  37.             <div class="grid">
  38.                 <figure class="effect-sadie">
  39.                         <img src="img/2.jpg" alt="img02"/>
  40.                         <figcaption>
  41.                             <h2>Holy <span>Sadie</span></h2>
  42.                             <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
  43.                             <a href="#">View more</a>
  44.                         </figcaption>            
  45.                     </figure>
  46.                 <figure class="effect-sadie">
  47.                         <img src="img/14.jpg" alt="img14"/>
  48.                         <figcaption>
  49.                             <h2>Holy <span>Sadie</span></h2>
  50.                             <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
  51.                             <a href="#">View more</a>
  52.                         </figcaption>            
  53.                     </figure>
  54.             </div>
  55.             <h2>
  56.                 Honey</h2>
  57.             <div class="grid">
  58.                 <figure class="effect-honey">
  59.                         <img src="img/4.jpg" alt="img04"/>
  60.                         <figcaption>
  61.                             <h2>Dreamy <span>Honey</span> <i>Now</i></h2>
  62.                             <a href="#">View more</a>
  63.                         </figcaption>            
  64.                     </figure>
  65.                 <figure class="effect-honey">
  66.                         <img src="img/5.jpg" alt="img05"/>
  67.                         <figcaption>
  68.                             <h2>Dreamy <span>Honey</span> <i>Now</i></h2>
  69.                             <a href="#">View more</a>
  70.                         </figcaption>            
  71.                     </figure>
  72.             </div>
  73.             <h2>
  74.                 Layla</h2>
  75.             <div class="grid">
  76.                 <figure class="effect-layla">
  77.                         <img src="img/6.jpg" alt="img06"/>
  78.                         <figcaption>
  79.                             <h2>Crazy <span>Layla</span></h2>
  80.                             <p>When Layla appears, she brings an eternal summer along.</p>
  81.                             <a href="#">View more</a>
  82.                         </figcaption>            
  83.                     </figure>
  84.                 <figure class="effect-layla">
  85.                         <img src="img/3.jpg" alt="img03"/>
  86.                         <figcaption>
  87.                             <h2>Crazy <span>Layla</span></h2>
  88.                             <p>When Layla appears, she brings an eternal summer along.</p>
  89.                             <a href="#">View more</a>
  90.                         </figcaption>            
  91.                     </figure>
  92.             </div>
  93.             <h2>
  94.                 Zoe</h2>
  95.             <div class="grid">
  96.                 <figure class="effect-zoe">
  97.                         <img src="img/25.jpg" alt="img25"/>
  98.                         <figcaption>
  99.                             <h2>Creative <span>Zoe</span></h2>
  100.                             <p class="icon-links">
  101.                                 <a href="#"><span class="icon-heart"></span></a>
  102.                                 <a href="#"><span class="icon-eye"></span></a>
  103.                                 <a href="#"><span class="icon-paper-clip"></span></a>
  104.                             </p>
  105.                             <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
  106.                         </figcaption>            
  107.                     </figure>
  108.                 <figure class="effect-zoe">
  109.                         <img src="img/26.jpg" alt="img26"/>
  110.                         <figcaption>
  111.                             <h2>Creative <span>Zoe</span></h2>
  112.                             <p class="icon-links">
  113.                                 <a href="#"><span class="icon-heart"></span></a>
  114.                                 <a href="#"><span class="icon-eye"></span></a>
  115.                                 <a href="#"><span class="icon-paper-clip"></span></a>
  116.                             </p>
  117.                             <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
  118.                         </figcaption>            
  119.                     </figure>
  120.             </div>
  121.             <h2>
  122.                 Oscar</h2>
  123.             <div class="grid">
  124.                 <figure class="effect-oscar">
  125.                         <img src="img/9.jpg" alt="img09"/>
  126.                         <figcaption>
  127.                             <h2>Warm <span>Oscar</span></h2>
  128.                             <p>Oscar is a decent man. He used to clean porches with pleasure.</p>
  129.                             <a href="#">View more</a>
  130.                         </figcaption>            
  131.                     </figure>
  132.                 <figure class="effect-oscar">
  133.                         <img src="img/10.jpg" alt="img10"/>
  134.                         <figcaption>
  135.                             <h2>Warm <span>Oscar</span></h2>
  136.                             <p>Oscar is a decent man. He used to clean porches with pleasure.</p>
  137.                             <a href="#">View more</a>
  138.                         </figcaption>            
  139.                     </figure>
  140.             </div>
  141.             <h2>
  142.                 Marley</h2>
  143.             <div class="grid">
  144.                 <figure class="effect-marley">
  145.                         <img src="img/11.jpg" alt="img11"/>
  146.                         <figcaption>
  147.                             <h2>Sweet <span>Marley</span></h2>
  148.                             <p>Marley tried to convince her but she was not interested.</p>
  149.                             <a href="#">View more</a>
  150.                         </figcaption>            
  151.                     </figure>
  152.                 <figure class="effect-marley">
  153.                         <img src="img/12.jpg" alt="img12"/>
  154.                         <figcaption>
  155.                             <h2>Sweet <span>Marley</span></h2>
  156.                             <p>Marley tried to convince her but she was not interested.</p>
  157.                             <a href="#">View more</a>
  158.                         </figcaption>            
  159.                     </figure>
  160.             </div>
  161.             <h2>
  162.                 Ruby</h2>
  163.             <div class="grid">
  164.                 <figure class="effect-ruby">
  165.                         <img src="img/13.jpg" alt="img13"/>
  166.                         <figcaption>
  167.                             <h2>Glowing <span>Ruby</span></h2>
  168.                             <p>Ruby did not need any help. Everybody knew that.</p>
  169.                             <a href="#">View more</a>
  170.                         </figcaption>            
  171.                     </figure>
  172.                 <figure class="effect-ruby">
  173.                         <img src="img/14.jpg" alt="img14"/>
  174.                         <figcaption>
  175.                             <h2>Glowing <span>Ruby</span></h2>
  176.                             <p>Ruby did not need any help. Everybody knew that.</p>
  177.                             <a href="#">View more</a>
  178.                         </figcaption>            
  179.                     </figure>
  180.             </div>
  181.             <h2>
  182.                 Roxy</h2>
  183.             <div class="grid">
  184.                 <figure class="effect-roxy">
  185.                         <img src="img/15.jpg" alt="img15"/>
  186.                         <figcaption>
  187.                             <h2>Charming <span>Roxy</span></h2>
  188.                             <p>Roxy was my best friend. She'd cross any border for me.</p>
  189.                             <a href="#">View more</a>
  190.                         </figcaption>            
  191.                     </figure>
  192.                 <figure class="effect-roxy">
  193.                         <img src="img/1.jpg" alt="img01"/>
  194.                         <figcaption>
  195.                             <h2>Charming <span>Roxy</span></h2>
  196.                             <p>Roxy was my best friend. She'd cross any border for me.</p>
  197.                             <a href="#">View more</a>
  198.                         </figcaption>            
  199.                     </figure>
  200.             </div>
  201.             <h2>
  202.                 Bubba</h2>
  203.             <div class="grid">
  204.                 <figure class="effect-bubba">
  205.                         <img src="img/2.jpg" alt="img02"/>
  206.                         <figcaption>
  207.                             <h2>Fresh <span>Bubba</span></h2>
  208.                             <p>Bubba likes to appear out of thin air.</p>
  209.                             <a href="#">View more</a>
  210.                         </figcaption>            
  211.                     </figure>
  212.                 <figure class="effect-bubba">
  213.                         <img src="img/16.jpg" alt="img16"/>
  214.                         <figcaption>
  215.                             <h2>Fresh <span>Bubba</span></h2>
  216.                             <p>Bubba likes to appear out of thin air.</p>
  217.                             <a href="#">View more</a>
  218.                         </figcaption>            
  219.                     </figure>
  220.             </div>
  221.             <h2>
  222.                 Romeo</h2>
  223.             <div class="grid">
  224.                 <figure class="effect-romeo">
  225.                         <img src="img/17.jpg" alt="img17"/>
  226.                         <figcaption>
  227.                             <h2>Wild <span>Romeo</span></h2>
  228.                             <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
  229.                             <a href="#">View more</a>
  230.                         </figcaption>            
  231.                     </figure>
  232.                 <figure class="effect-romeo">
  233.                         <img src="img/18.jpg" alt="img18"/>
  234.                         <figcaption>
  235.                             <h2>Wild <span>Romeo</span></h2>
  236.                             <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
  237.                             <a href="#">View more</a>
  238.                         </figcaption>            
  239.                     </figure>
  240.             </div>
  241.             <h2>
  242.                 Dexter</h2>
  243.             <div class="grid">
  244.                 <figure class="effect-dexter">
  245.                         <img src="img/19.jpg" alt="img19"/>
  246.                         <figcaption>
  247.                             <h2>Strange <span>Dexter</span></h2>
  248.                             <p>Dexter had his own strange way. You could watch him training ants.</p>
  249.                             <a href="#">View more</a>
  250.                         </figcaption>            
  251.                     </figure>
  252.                 <figure class="effect-dexter">
  253.                         <img src="img/12.jpg" alt="img12"/>
  254.                         <figcaption>
  255.                             <h2>Strange <span>Dexter</span></h2>
  256.                             <p>Dexter had his own strange way. You could watch him training ants.</p>
  257.                             <a href="#">View more</a>
  258.                         </figcaption>            
  259.                     </figure>
  260.             </div>
  261.             <h2>
  262.                 Sarah</h2>
  263.             <div class="grid">
  264.                 <figure class="effect-sarah">
  265.                         <img src="img/13.jpg" alt="img13"/>
  266.                         <figcaption>
  267.                             <h2>Free <span>Sarah</span></h2>
  268.                             <p>Sarah likes to watch clouds. She's quite depressed.</p>
  269.                             <a href="#">View more</a>
  270.                         </figcaption>            
  271.                     </figure>
  272.                 <figure class="effect-sarah">
  273.                         <img src="img/20.jpg" alt="img20"/>
  274.                         <figcaption>
  275.                             <h2>Free <span>Sarah</span></h2>
  276.                             <p>Sarah likes to watch clouds. She's quite depressed.</p>
  277.                             <a href="#">View more</a>
  278.                         </figcaption>            
  279.                     </figure>
  280.             </div>
  281.             <h2>
  282.                 Chico</h2>
  283.             <div class="grid">
  284.                 <figure class="effect-chico">
  285.                         <img src="img/15.jpg" alt="img15"/>
  286.                         <figcaption>
  287.                             <h2>Silly <span>Chico</span></h2>
  288.                             <p>Chico's main fear was missing the morning bus.</p>
  289.                             <a href="#">View more</a>
  290.                         </figcaption>            
  291.                     </figure>
  292.                 <figure class="effect-chico">
  293.                         <img src="img/4.jpg" alt="img04"/>
  294.                         <figcaption>
  295.                             <h2>Silly <span>Chico</span></h2>
  296.                             <p>Chico's main fear was missing the morning bus.</p>
  297.                             <a href="#">View more</a>
  298.                         </figcaption>            
  299.                     </figure>
  300.             </div>
  301.             <h2>
  302.                 Milo</h2>
  303.             <div class="grid">
  304.                 <figure class="effect-milo">
  305.                         <img src="img/11.jpg" alt="img11"/>
  306.                         <figcaption>
  307.                             <h2>Faithful <span>Milo</span></h2>
  308.                             <p>Milo went to the woods. He took a fun ride and never came back.</p>
  309.                             <a href="#">View more</a>
  310.                         </figcaption>            
  311.                     </figure>
  312.                 <figure class="effect-milo">
  313.                         <img src="img/3.jpg" alt="img03"/>
  314.                         <figcaption>
  315.                             <h2>Faithful <span>Milo</span></h2>
  316.                             <p>Milo went to the woods. He took a fun ride and never came back.</p>
  317.                             <a href="#">View more</a>
  318.                         </figcaption>            
  319.                     </figure>
  320.             </div>
  321.         </div>
  322.         <nav class="codrops-demos">
  323.                 <a class="current-demo" href="index.html">Set 1</a>
  324.                 <a href="index2.html">Set 2</a>
  325.             </nav>
  326.         <!-- Related demos -->
  327.     </div>
复制代码via:http://www.w2bc.com/Article/19556

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

1. 30款css3实现的鼠标经过图片显示描述特效

2. iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效

3. 分享Jquery+CSS3实现的3D下拉菜单特效

4. 一款jquery和css3实现的卡通人物动画特效

5. 一款jquery和css3实现的卡通人物动画特效

6. CSS3实现的图片加载动画效果

7. 效果非常酷!纯CSS3实现的图片滑块程序

8. 一款CSS3仿Google Play的垂直菜单

9. CSS 设置鼠标显示形状

10. Cufon, jQuery和CSS3实现的超强飞出菜单

本文来源:https://www.51html5.com/a1072.html

点击展开全部
上一篇:CSS书写规范及顺序 下一篇:CSS3图片倒影技术实现及原理

﹝30款css3实现的鼠标经过图片显示描述特效﹞相关内容

复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢