ログイン
問題25

hoverしたら画像を大きくしよう

疑似クラスhoverを使って画像のサイズを大きくする設定を行ないます。 今回はマウスを乗せた瞬間に大きくするのではなく、徐々に大きくなるアニメーションでの設定を行ないます。よく使われる機能なので覚えておきましょう。

アイコン画像

問題25:hoverしたら画像を大きくしよう

画像をhoverした時に画像の大きさを80% → 100%にしてみましょう!
簡易的なアニメーションもつけてみましょう!

見本動画を参考にして実装してください。

エディターのアイコンあらかじめエディタに書くコード

                <div class="img-area">
    <img src="https://ninjacode.work/images/main-logo.png">
</div>
¥HTML¥
              
                .img-area {
    background-color: #000;
    display: inline-block;
}
.img-area img {
    width: 80%;
    display: block;
    margin: auto;
}
¥CSS¥
              

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


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

              <div class="img-area">
  <img src="https://ninjacode.work/assets/img/kv.png">
</div>
¥HTML¥
            
              .img-area {
    background-color: #000;
    display: inline-block;
}
.img-area img {
    width: 80%;
    display: block;
    margin: auto;
    transition: 1s;
}
.img-area > img:hover {
    width: 100%;
}
¥CSS¥
            

コメントのアイコン解説

画像に対して:hoverを指定し、ホバーした際の挙動にスタイルをあてて行きます。

今回は、画像の幅を80%から100%に変えるだけなのでwidth: 100%を入れてあげてアニメーションでtransition: 1s(1秒)を入れております。
ログインして解答を見る

コメントのアイコン補足

hoverを使いこなせるようになれば、様々なボタンを作ることができます。
色々なプロパティと組み合わせて、独自性のあるボタンを考えるのも面白いですよ!

少し難易度は上がりますが、transitionプロパティなどを使いこなせるようになったらanimationプロパティというものに挑戦するといいかと思います。
@keyframesというものを定義する必要があり、より細かくアニメーションを設定する場合には非常に役立ちます。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる