JQuery 滑過圖示顯示說明 - Codrops

Caption Hover Effects 元件(範例裡的第一個效果). 官網:http://tympanus.net/codrops/2013/06/18/caption-hover-effects/ 其它不錯的特效:http://www.minwt.com/css/13153.html

by Shang-De You

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<!--滑過圖示效果-->
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/CaptionHoverEffects/css/default.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/CaptionHoverEffects/css/component.css" />
<script src="http://tympanus.net/Tutorials/CaptionHoverEffects/js/modernizr.custom.js"></script>  
<script type="text/javascript" src="http://tympanus.net/Tutorials/CaptionHoverEffects/js/toucheffects.js"></script>

<ul class="grid cs-style-3">
				<li>
					<figure>
						<img src="http://tympanus.net/Tutorials/CaptionHoverEffects/images/3.png" alt="img03">
						<figcaption>
							<h3>Settings</h3>
							<span>Jacob Cummings</span>
							<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
						</figcaption>
					</figure>
				</li>
				<li>
					<figure>
						<img src="http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" alt="img01">
						<figcaption>
							<h3>Camera</h3>
							<span>Jacob Cummings</span>
							<a href="http://dribbble.com/shots/1115632-Camera">Take a look</a>
						</figcaption>
					</figure>
				</li>
				<li>
					<figure>
						<img src="http://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png" alt="img02">
						<figcaption>
							<h3>Music</h3>
							<span>Jacob Cummings</span>
							<a href="http://dribbble.com/shots/1115960-Music">Take a look</a>
						</figcaption>
					</figure>
				</li>
				<li>
					<figure>
						<img src="http://tympanus.net/Tutorials/CaptionHoverEffects/images/4.png" alt="img04">
						<figcaption>
							<h3>Safari</h3>
							<span>Jacob Cummings</span>
							<a href="http://dribbble.com/shots/1116775-Safari">Take a look</a>
						</figcaption>
					</figure>
				</li>
				<li>
					<figure>
						<img src="http://tympanus.net/Tutorials/CaptionHoverEffects/images/5.png" alt="img05">
						<figcaption>
							<h3>Phone</h3>
							<span>Jacob...