$(document).ready(function() { //ホバーイベント $(".photo").hover(function() { //class="title"を探してフェードエフェクト $(this).find(".title").stop().fadeTo(300, 1 , function() { }); } , function() { //ホバーが外れた時の処理 $(this).find(".title").fadeTo(300, 0); }); });
.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; } .title h2 { font-size: 21px; color: #FFF; text-align: center; font-weight: normal; margin: 15px 0px 10px 0px; padding: 0; text-transform: none; border-bottom: none; } .title h3 { font-size: 11px; color: #999999; text-align: center; font-weight: normal; margin: 0; padding: 0; }
<div class="photo"> <div class="title" style="display: none;"> <h2>fade in</h2> <h3>text</h3> </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>