ログイン

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

HTML_CSSの問題

HTML_CSS

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

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」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!