30款css3实现的鼠标经过图片显示描述特效
css3 实现 显示 图片 30 鼠标 特效 描述
2023-09-27 14:28:19 时间
今天给大家分享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>
相关文章
- iOS Web应用开发:运用HTML5、CSS3与JavaScript
- [转] css3变形属性transform
- CSS3 transition实现超酷图片墙动画效果
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
- CSS3怎样实现超出指定文本以省略号显示效果
- css3实现水平垂直居中------(特别注意,里边的固定还是不固定)
- CSS3 - footer 固定在底部(无论页面多高始终在底部)
- 图解css3:核心技术与案例实战. 3.1 CSS3边框简介
- [WPF] 抄一个 CSS3 实现的按钮
- HTML5、CSS3新特性
- 【JavaScript】HTML5/CSS3实现五彩进度条应用
- HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容
- 《圣殿祭司的ASP.NET4.0专家技术手册》----1-7 HTML5与CSS3的支持
- 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.8 总结
- 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.4 微格式
- 《HTML5+CSS3网页设计入门必读》——6.7 测验
- 《HTML5和CSS3快速参考》——第1章 走进HTML51.1 概述
- css3组件实战--绚丽效果篇
- CSS3+JS 实现的便签应用
- CSS3如何实现div闪烁效果
- 一文带你复习CSS3关于动画的全部知识
- 《响应式Web设计:HTML5和CSS3实践指南》——2.1节简介
- 《响应式Web设计:HTML5和CSS3实践指南》——2.4节使用画布实现内侧阴影和外侧阴影
- css3 :not(选择器) 的简单使用
- css3实现jquery mobile的页面过度原理
- 本周推荐7款CSS3实现的动态特效
- 纯洁CSS3实现图片墙
- CSS3&JavaScript 图片分隔切换
- CSS3 object-fit 和 object-postion 实现图片居中缩放
- CSS3 图片扫光/辉光