【マウスオーバー】画像をマウスオーバーで反転させてテキスト表示

画像をマウスオーバーすると画像が反転してキャプションのテキストが表示されます。スマホ表示では単純なリンクの画像にします。CSS3のbackface-visibility: hiddenを利用し、htmlとCSSのみで実装します。

htmlのコードは下記になります。
画像を内包するdivタグにclass=”rotate_image”、キャプションのテキストのpタグを内包するdivタグにclass=”rotate_txt”を付与し、その全体をaタグで内包します。

<div class="hover_image_wrap">
	<div class="hover_image">
		<a href="https://tech.brick-plan.jp/category/fade/">
			<div class="rotate_image"><img src="hover01.jpg" alt=""></div>
			<div class="rotate_txt"><p class="caption_txt">画像タイトル01</p></div>
		</a>
	</div>
	<div class="hover_image">
		<a href="https://tech.brick-plan.jp/category/tab/">
			<div class="rotate_image"><img src="hover02.jpg" alt=""></div>
			<div class="rotate_txt"><p class="caption_txt">画像タイトル02</p></div>
		</a>
	</div>
</div>

続いてCSSのコードです。
まず画像を内包するdivタグに、backface-visibility: hiddenを設定します。これで画像が反転した時に背面を描画せず、画像自体がないように表示されます。また、z-index: 2を設定しテキストのpタグを内包するdivタグよりも前面にします。これがないとhtmlの記述上、テキストのpタグを内包するdivタグが前面になってしまいます。画像マウスオーバー時はtransform: rotateY(180deg)を設定し、画像を反転させます。
次にテキストのpタグを内包するdivタグにposition: absoluteを設定し、画像に重ねて配置します。そして、top: 0、left: 0、right: 0、bottom: 0を設定して、縦いっぱい横いっぱいに表示します。そして、transform: rotateY(180deg)を設定して反転させた状態にしておき、マウスオーバー時にtransform: rotateY(0)で反転が戻る動きにします。
スマホ表示時は画像を内包するdivタグのマウスオーバー時にtransform: rotateY(0)を設定し、画像が反転する動作を発生させていません。

.hover_image_wrap {
	display: flex;
	justify-content: space-between;
}
.hover_image {
	width: 48%;
}
.hover_image a {
	display: block;
	position: relative;
}
.hover_image a .rotate_image {
	position: relative;
	transition: transform .5s;
	z-index: 2;
	backface-visibility: hidden;
}
.hover_image a:hover .rotate_image {
	transform: rotateY(180deg);
}
.hover_image a .rotate_txt {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #eee;
	transform: rotateY(180deg);
	transition: transform .5s;
	z-index: 1;
}
.hover_image a:hover .rotate_txt {
	transform: rotateY(0);
}
.caption_txt {
	width: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	text-align: center;
	color: #000;
}
@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;
	}
	.hover_image a:hover .rotate_image {
		transform: rotateY(0);
	}
}