【マウスオーバー】画像の透過度を設定【CSSのみ・jQueryのみ】

マウスオーバーでフェードして画像の透過度を50%にします。マウスアウトでフェードして元に戻します。CSSのみの記述とjQueryのみの記述、どちらでも同じ動きが実装できます。

htmlのコードは下記になります。
CSSで透過度を設定する画像にはclass=”cssOpacity”、jQueryで透過度を設定する画像にはclass=”jsOpacity”を付与します。

<div class="hover_image_wrap">
	<div class="hover_image">
		<div><a href="https://tech.brick-plan.jp/category/fade/">
			<img src="hover01.jpg" alt="" class="cssOpacity">
		</a></div>
		<p class="caption_txt">CSSのopacityで画像の透過度を設定しています。</p>
	</div>
	<div class="hover_image">
		<div><a href="https://tech.brick-plan.jp/category/tab/">
			<img src="hover02.jpg" alt="" class="jsOpacity">
		</a></div>
		<p class="caption_txt">jQueryのfadeToで画像の透過度を設定しています。</p>
	</div>
</div>

続いてCSSのコードです。
クラス名cssOpacityの画像にtransition: 0.6s;を指定してフェードの動きを実装します。
また、リンクのaタグにマウスオーバーした時の動作として、クラス名cssOpacityの画像にopacity: 0.5;を指定します。

.hover_image_wrap {
	display: flex;
	justify-content: space-between;
	max-width: 630px;
	margin: 0 auto;
}
.hover_image {
	width: 48%;
}
.hover_image a img.cssOpacity {
	transition: 0.6s;
}
.hover_image a:hover img.cssOpacity {
	opacity: 0.5;
}
.caption_txt {
	margin: 0.5em 0 0;
	padding: 0;
}
@media screen and (max-width: 480px) {
	.hover_image_wrap {
		flex-direction: column;
	}
	.hover_image {
		width: 100%;
		margin: 0 0 1em;
	}
	.hover_image:last-child {
		margin: 0;
	}
}

最後にjQueryのコードです。
hoverメソッドでマウスオーバーとマウスアウトの処理を分けて記述します。
画像の透過度と透過するスピードはfadeToで指定します。マウスオーバー時はクラス名jsOpacityの画像の透過度を0.5に、マウスアウト時は1.0にします。透過度1.0は全く透過していない状態です。透過するスピードはミリ秒で指定可能ですが、下記の文字列でも指定できます。
‘fast’：200ミリ秒
‘normal’：400ミリ秒
‘slow’：600ミリ秒

$(function() {
	$('.hover_image a').hover(
		function(){
			$(this).children('img.jsOpacity').fadeTo('slow',0.5);
		},
		function(){
			$(this).children('img.jsOpacity').fadeTo('slow',1.0);
		}
	);
});