マウスオーバーした画像を徐々に透過させるjQuery

更新日：2021年1月15日

画像をそのままimgタグを使って配置するのもいいですが、お洒落な画像や魅せたい画像については何か一味つけたくなるもの。
例えば画像の上にマウスを置いた際に徐々に透過させる効果を付けているサイトは最近多いですよね。
この記事ではその方法をご紹介します。たった一文のjQueryの記述だけで簡単実装出来ます。

それではそのjQueryの記述ですが、下記になります。

$(function(){
	$("img.toka").hover(function(){
		$(this).stop().animate({"opacity":"0.7"});
	},function(){
		$(this).stop().animate({"opacity":"1"});
	});
});

tokaという名前のclassがついたimgタグにマウスが乗っかると70%透過します。
マウスが外れると100%の透過率（＝通常時）に戻るというjQueryになります。

百聞は一見に如かずということで、以下に実装例です。

いかがでしたでしょうか？
とっても簡単実装です。
是非使ってみて下さい。