Result
jQuery
$(document).ready(function(){ $('.gallery').hover(function(){ //マウスホバー時に画像を探してアニメーション。通常は変数宣言する $(this).find('img').animate({width:60, marginTop:10, marginLeft:10}, 200); },function(){ $(this).find('img').animate({width:200, marginTop:0, marginLeft:0},300); });}); |
css
.container {width: auto;}.gallery { background-color:#eee; width:200px; height:150px; overflow:hidden; margin:5px; float:left;}.info { margin-left:10px; padding:3px;}.inf h2,.inf p { color:#666;}.clear { clear:both; margin-top:10px;} |
html
<div class="container"> <div class="gallery"> <img src="01.jpg"> <div class="inf"> <h2>List01</h2> <p>List01 List01 List01 List01 List01 List01</p> </div> </div> <div class="gallery"> <img src="02.jpg"> <div class="inf"> <h2>List02</h2> <p>List02 List02 List02 List02 List02 List02</p> </div> </div></div> |
via
Zoom-Info – How To Create An Informative Image Gallery With jQuery & CSS
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
