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