【CSS】YouTube風に静止画にマウスオーバーでGIFのサムネを出す【868回目】

マウスオーバーでGIFを出したい

YouTubeにあるように、静止画をマウスオーバーすると、動画の一部が流れるようなものを作りたい。

1. 静止画
2. マウスオーバーでGIF動画を流す
3. マウスオーバーやめると戻す

ってやりたい。

1. 入れ替える画像を用意する
2. 入れ替えるCSSを用意する

入れ替える画像を用意する

<div class="hover-change">
    <img class="hover-change-img" src="/hoge.png">
    <img class="hover-change-gif" src="/hoge.gif">
</div>

こんな感じに、構成を組もう。

入れ替えるCSSを用意する

■初期状態

.hover-change .hover-change-img {
    display: block;
}
.hover-change .hover-change-gif {
    display: none;
}

■ホバー

.hover-change:hover .hover-change-img {
    display: none !important;
}
.hover-change:hover .hover-change-gif {
    display: block !important;
}

特徴としては、ホバーの対象を親要素にしていること。
親要素がホバーになった時に、上記のCSSが動く。

これで親要素がホバーされた時に動くGIFと画像が入れ替わり、動画が再生されたかのようなものが作れる。