
要素のhover時に画像を重ねることができる「Slickhover.js」
2013年6月26日jQueryプラグイン活用
画像等の要素にマウスを重ねると、アニメーションで画像と背景色を画像にオーバーレイさせることができます。
JavaScript
(function($){ $(function() { $('#photoList img').slickhover({ icon: "ico_zoom.png", color: "#000000", opacity: 0.5, speed: 300, animateIn: false }); }); })(jQuery);
HTML
<div id="photoList"> <div class="photo"><a href="#"><img src="img01.jpg" width="160"></a></div> <div class="photo"><a href="#"><img src="img02.jpg" width="160"></a></div> <div class="photo"><a href="#"><img src="img03.jpg" width="160"></a></div> </div>