問題

25
HTML_CSS

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

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

HTML_CSSの問題に挑戦しよう!

問題

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¥
                

期待する画面

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

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

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

補足

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

少し難易度は上がりますが、transitionプロパティなどを使いこなせるようになったらanimationプロパティというものに挑戦するといいかと思います。
@keyframesというものを定義する必要があり、より細かくアニメーションを設定する場合には非常に役立ちます。

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET