【マウスオーバー】画像をマウスオーバーでメニューを表示

画像をマウスオーバーすると画像の中央から飛び出すようにメニューが表示されます。スマホ表示では単純なリンクの画像にします。htmlとCSSのみで実装します。

htmlのコードは下記になります。
クラス名menu_imgを付与したdivタグ内に、リンクを設定した画像とメニューのulタグを配置します。

<div class="menu_img">
	<a href="#"><img src="hover01.jpg" alt=""></a>
	<ul>
		<li><a href="#">メニュー01：テキストテキストテキスト</a></li>
		<li><a href="#">メニュー02：テキストテキストテキスト</a></li>
		<li><a href="#">メニュー03：テキストテキストテキスト</a></li>
		<li><a href="#">メニュー04：テキストテキストテキスト</a></li>
		<li><a href="#">メニュー05：テキストテキストテキスト</a></li>
	</ul>
</div>

続いてCSSのコードです。
まずリンクを設定した画像とメニューのulタグを内包するdivタグには、overflow: hiddenを設定します。これがないとfilterでぼかす画像がはみ出して表示されてしまいます。メニューのulタグは画像の中央から飛び出すような動きを実現するため、position: absolute、top: 0、left: 0、right: 0、bottom: 0、width: 100%、height: 100%、transform: scale(0)、transition: .0s、opacity: 0を設定します。そして画像マウスオーバー時にtransform: scale(1)、transition: .7s、opacity: 1にオーバーライトします。なおマウスオーバー時には画像をfilter: blur(10px)でぼかします。

.menu_img {
	position: relative;
	overflow: hidden;
}
.menu_img img {
	filter: blur(0);
	transition: .0s;
}
.menu_img:hover img {
	filter: blur(10px);
	transition: .7s;
}
.menu_img ul {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: .0s;
	opacity: 0;
	background-color: rgba(255,255,255,0.8);
	padding: 20px;
	box-sizing: border-box;
}
.menu_img:hover ul {
	transform: scale(1);
	transition: .7s;
	opacity: 1;
}
.menu_img ul li {
	border-bottom: 1px solid #999;
}
.menu_img ul li:first-child {
	border-top: 1px solid #999;
}
.menu_img ul li a {
	display: block;
	background: url(arrow.png) no-repeat 8px center;
	background-size: 3px auto;
	padding: 10px 0 10px 16px;
	text-decoration: none;
	transition: .3s;
	color: #000;
}
.menu_img ul li:hover a {
	background-color: rgba(255,255,255,0.9);
}
@media screen and (max-width: 640px) {
	.menu_img:hover img {
		filter: blur(0);
	}
	.menu_img a:hover img {
		opacity: .5;
	}
	.menu_img ul {
		display: none;
	}
}