<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3标题悬停效果</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container demo-3">
<header>
<h1>css3标题悬停效果</h1>
<nav class="codrops-demos">
<a href="index.html">Effect 1</a>
<a href="index2.html">Effect 2</a>
<a href="index3.html">Effect 3</a>
<a class="current-demo" href="index4.html">Effect 4</a>
<a href="index5.html">Effect 5</a>
<a href="index6.html">Effect 6</a>
<a href="index7.html">Effect 7</a>
</nav>
</header>
<ul class="grid cs-style-4">
<li>
<figure>
<div><img src="images/5.png" alt="img05"></div>
<figcaption>
<h3>Safari</h3>
<span>Jacob Cummings</span>
<a href="/?shots/1116775-Safari">
Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="images/6.png" alt="img06"></div>
<figcaption>
<h3>Game Center</h3>
<span>Jacob Cummings</span>
<a href="/?shots/1118904-Game-Center">
Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="images/2.png" alt="img02"></div>
<figcaption>
<h3>Music</h3>
<span>Jacob Cummings</span>
<a href="/?shots/1115960-Music">
Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="images/4.png" alt="img04"></div>
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="/?shots/1116685-Settings">
Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="images/1.png" alt="img01"></div>
<figcaption>
<h3>Camera</h3>
<span>Jacob Cummings</span>
<a href="/?shots/1115632-Camera">
Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img src="images/3.png" alt="img03"></div>
<figcaption>
<h3>Phone</h3>
<span>Jacob Cummings</span>
<a href="/?shots/1117308-Phone">
Take a look</a>
</figcaption>
</figure>
</li>
</ul>
</div><!-- /container -->
<script src="js/toucheffects.js"></script>
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
</div></body>
</html>
CSS3实现多种图片悬停提示效果源码集
需积分: 9 59 浏览量
2017-06-02
13:53:34
上传
评论
收藏 67KB ZIP 举报
鼠标悬停显示影藏标题效果.zip （21个子文件） 
css 
default.css 3KB component.css 8KB
index5.html 3KB index4.html 3KB images 
5.png 11KB 1.png 9KB 6.png 8KB 2.png 5KB 4.png 8KB 3.png 6KB fonts codropsicons codropsicons.woff 2KB
codropsicons.svg 4KB codropsicons.ttf 2KB codropsicons.eot 2KB index.html 3KB js modernizr.custom.js 8KB toucheffects.js 2KB index2.html 3KB index6.html 3KB index7.html 3KB index3.html 3KB资源评论
