【マウスオーバー】サムネイル画像のマウスオーバーでメイン画像を表示

サムネイル画像をマウスオーバーするとメイン画像が表示されます。同様にキャプションのテキストも差し代わります。

htmlのコードは下記になります。
メイン画像のみを格納するdivタグを用意し、class=”main_img_inner”を付与します。

<div class="img_all">
	<div class="main_img">
		<div class="main_img_inner"><img src="hover05.jpg" alt="桃とブドウ"></div>
		<p class="main_title">桃とブドウ</p>
	</div>
	<div class="thum_img">
		<div><img src="hover05.jpg" alt="桃とブドウ"><p class="thum_title">桃とブドウ</p></div>
		<div><img src="hover06.jpg" alt="パンとコーヒー"><p class="thum_title">パンとコーヒー</p></div>
		<div><img src="hover07.jpg" alt="イチゴのかき氷"><p class="thum_title">イチゴのかき氷</p></div>
	</div>
</div>

続いてCSSのコードです。
スマホ表示用に、サムネイル画像を縦並びにするメディアクエリも記述します。

img {
	width: 100%;
	vertical-align: top;
	box-sizing: border-box;
}
.img_all {
	display: flex;
	justify-content: space-between;
}
.main_img {
	width: 48%;
}
.main_img img {
	border: 1px solid #cccccc;
}
.main_title {
	margin: .3em 0 0;
	text-align: center;
}
.thum_img {
	display: flex;
	justify-content: space-between;
	width: 49%;
}
.thum_img div {
	width: 30%;
}
.thum_img div img {
	border: 1px solid #cccccc;
}
.thum_img div img:hover {
	cursor: pointer;
}
.thum_title {
	font-size: .8em;
	margin: .3em 0 0;
	text-align: center;
}
@media screen and (max-width: 480px) {
	.main_img {
		width: 68%;
	}
	.thum_img {
		display: block;
		width: 28%;
	}
	.thum_img div {
		width: 100%;
	}
	.thum_title {
		margin: .3em 0 1em;
	}
}

最後にjQueryのコードです。
サムネイル画像とメイン画像のimgタグのsrc属性を比較して、異なる場合のみ画像とキャプションの差し代えを実行します。メイン画像のimgタグとキャプションのテキストは、子要素が削除できるemptyを利用して削除します。その後、cloneを利用してサムネイル画像を複製し、appendToでメイン画像を追加。appendでキャプションを追加しています。

$(function() {
	$('.thum_img div img').hover(function() {
		var thum_text = $(this).parent().find('.thum_title').text();
		var thum_src = $(this).attr('src');
		var main_src = $('.main_img img').attr('src');

		if(thum_src != main_src){
			$('.main_img_inner').empty();
			$(this).clone().appendTo('.main_img_inner');
			$('.main_title').empty();
			$('.main_title').append(thum_text);
		}
	});
});