【マウスオーバー】CSSのみで画像内にキャプションを表示

マウスオーバーで画像内にキャプションを表示し、マウスアウトでキャプションを非表示する動作のサンプルです。CSSのみで実装し、フェードイン・フェードアウトはtransitionを利用します。

サンプルデモはこちら
※なおChromeはページロード時にtransitionが動作してしまうため、解決策として外部CSS読み込み後に実際は使用しない外部jsを読み込んでいます。

htmlのコードは下記になります。
画像とキャプションを格納するdivタグにclass=”hover_image″を付与します。

<div class="hover_image_wrap col04">
	<div class="hover_image">
		<a href="#">
			<img src="hover01.jpg" alt="">
			<p class="caption_txt">キャプション01</p>
		</a>
	</div>
	<div class="hover_image">
		<a href="#">
			<img src="hover02.jpg" alt="">
			<p class="caption_txt">キャプション02</p>
		</a>
	</div>
	<div class="hover_image">
		<a href="#">
			<img src="hover03.jpg" alt="">
			<p class="caption_txt">キャプション03</p>
		</a>
	</div>
	<div class="hover_image">
		<a href="#">
			<img src="hover04.jpg" alt="">
			<p class="caption_txt">キャプション04</p>
		</a>
	</div>
</div>

続いてCSSのコードです。
画像とキャプションを格納したclass=”hover_image”のdivタグはFlexboxで横並びにしています。
キャプションのpタグは画像全体にかぶせて半透明の黒背景にします。opacity: 0;で非表示、マウスオーバー時はopacity: 1;で表示にします。display: none;で非表示、display: block;で表示ではtransitionが動作しないためopacityで実装する必要があります。キャプションのpタグにtransition: 0.5s;を設定することで、フェードイン・フェードアウトの動作になります。

.hover_image_wrap {
	display: flex;
	margin: 0 0 3em;
}
.col04 .hover_image {
	width: 24%;
}
.col03 .hover_image {
	width: 32.4%;
}
.col02 .hover_image {
	width: 49.3%;
}
.hover_image {
	position: relative;
	margin: 0 8px 0 0;
	overflow: hidden;
}
.hover_image:last-child {
	margin: 0;
}
.hover_image a {
	display: block;
}
.caption_txt {
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: 1.4;
	background: rgb(0,0,0,0.6);
	color: #ffffff;
	text-align: center;
	transition: 0.5s;
}
.hover_image a:hover .caption_txt {
	opacity: 1;
}
@media screen and (max-width: 640px) {
	.hover_image_wrap {
		flex-wrap: wrap;
	}
	.col04 .hover_image,
	.col03 .hover_image,
	.col02 .hover_image {
		width: 100%;
	}
	.hover_image {
		margin: 0 0 10px 0;
	}
}