Result
jQuery
$(document).ready(function() { //ホバーイベント $(".photo").hover(function() { //class="title"を探してフェードエフェクト $(this).find(".title").stop().fadeTo(300, 1 , function() { }); } , function() { //ホバーが外れた時の処理 $(this).find(".title").fadeTo(300, 0); });}); |
css
.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;} |
html
<div class="photo"><div class="title" style="display: none;"> <h2>fade in</h2> <h3>text</h3></div> <a href="#" target="_blank"><img src="01.jpg" /></a></div> |
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
