$(document).ready(function() { $(".Photo").hover(function() { $(this).find(".Title").stop().fadeTo(300, 1 , function() { }); } , function() { $(this).find(".Title").fadeTo(300, 0); }); });
<div class="Photo"> <div class="Title"> <h2>万里の長城</h2> </div> <a href="http://www.flickr.com/photos/watchsmart/511699887/" target="_blank"><img src="http://farm1.static.flickr.com/224/511699887_b3d27228a1_m.jpg" alt="Great Wall of China" width="283" height="300" /></a> </div>
.Photo { width: 283px; height: 300px; position: relative; display: block; margin-bottom: 24px; } .Title { width: 283px; height: 60px; background: #000; position: absolute; left: 0px; top: 240px; display: none; } .Title h2 { font-family: Arial, Helvetica, sans-serif; font-size: 21px; color: #FFF; text-align: center; font-weight: normal; margin: 15px 0px 10px 0px; padding: 0px 0px 0px 0px; text-transform: none; border-bottom: none; }