CSSのみで作る蛇腹型横スライド

むかしむかし、メインビジュアルを蛇腹のように折りたたみ、マウスオーバーするとビジュアルを大きく表示させるものをよく見かけました。
今はCSSだけで実現できますが、言ってしまえばただの「プルダウンの横版」って感じです。
メインビジュアル内に印象的に且つナビゲーション機能や補足情報を盛り込みたい時に使えるかもしれません。
スマートフォンではマウスオーバーの概念が無いのと、幅が狭いのでキツキツかもしれませんが。。。

ポイントは下記3つ。

• 画像は背景に指定
• 初期は等分割した幅を指定
• マウスオーバー時はそのボックス内の幅を指定

##DEMO
デモはこちらから
※現状PCでしか動作しません。
スマートフォンはマウスオーバー概念が無いので、JSで処理する必要があります。

##CODE

###HTML

<div class="mv-Accordion">
	<div class="mv-Accordion__box"></div>
	<div class="mv-Accordion__box"></div>
	<div class="mv-Accordion__box"></div>
	<div class="mv-Accordion__box"></div>
</div>

###CSS

.mv-Accordion {
	width: 100%;
	height: 100vh;
	display: flex;
}
.mv-Accordion__box {
	width: 25%; /*初期の幅*/
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover; /*いかなるアスペクト比にもすべてが表示されるように指定*/
	transition: width 1s; /*アニメーションの秒数*/
}
.mv-Accordion__box:hover {
	width: 50%; /*マウスオーバーしたときの幅を指定*/
}
.mv-Accordion__box:nth-child(1) {
	background-image: url('../images/ph_1.jpg');
}
.mv-Accordion__box:nth-child(2) {
	background-image: url('../images/ph_2.jpg');
}
.mv-Accordion__box:nth-child(3) {
	background-image: url('../images/ph_3.jpg');
}
.mv-Accordion__box:nth-child(4) {
	background-image: url('../images/ph_4.jpg');
}

##対象ブラウザ
Edge、IE11、Chrome、Firefox、Safari