問題
8
CSSアニメーション
hoverで画像を変えよう
CSSアニメーションの問題に挑戦しよう！
問題
「hoverで画像を変えよう」
今回はhoverによって画像が切り替わるアニメーションを作って行きたいと思います。画像は何を使ってもらっても構わないのですが、一応デモで使っている画像のurlを記載しておきます。
通常時：https://ninjacode.work/assets/img/top/logo.png
hover時：https://ninjacode.work/assets/img/top/logo_red.png
あらかじめエディタに書くコード
<div class="frame">
<div class="image"></div>
</div>
¥HTML¥
.frame{
width: 400px;
height: 274px;
border: 10px solid burlywood;
}
.image{
width: inherit;
height: inherit;
box-shadow: 0 0 20px #bbbbbb inset;
}
¥CSS¥
期待する画面
解答と解説（hoverで画像を変えよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
まずbackground-imageを指定する時はbackground-size:coverとbackground-repeat:no-repeatを書かなければなりません。これはもう暗黙のルールみたいなものだと思います。あとは通常時とhover時にそれぞれbackground-imageを割り当ててあげるだけで完成です。ただしurlを直に入れるのではなく、url()の括弧の中に書きましょう。
