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...