ログイン
問題8

hoverで画像を変えよう

アイコン画像

問題8: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¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              .image{
  background-image: url(https://urbanlife.tokyo/wp-content/uploads/2019/06/190616_irasuto_01.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.image:hover{
  background-image: url(https://www.724685.com/images/site/20190401-02.png);
}
¥CSS¥
            

コメントのアイコン解説

まずbackground-imageを指定する時はbackground-size:coverとbackground-repeat:no-repeatを書かなければなりません。これはもう暗黙のルールみたいなものだと思います。あとは通常時とhover時にそれぞれbackground-imageを割り当ててあげるだけで完成です。ただしurlを直に入れるのではなく、url()の括弧の中に書きましょう。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
CSSAnimationを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる