問題
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¥
期待する画面
解答と解説（hoverしたら画像を大きくしよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
画像に対して:hoverを指定し、ホバーした際の挙動にスタイルをあてて行きます。
今回は、画像の幅を80%から100%に変えるだけなのでwidth: 100%を入れてあげてアニメーションでtransition: 1s(1秒)を入れております。
補足
hoverを使いこなせるようになれば、様々なボタンを作ることができます。
色々なプロパティと組み合わせて、独自性のあるボタンを考えるのも面白いですよ!
少し難易度は上がりますが、transitionプロパティなどを使いこなせるようになったらanimationプロパティというものに挑戦するといいかと思います。
@keyframesというものを定義する必要があり、より細かくアニメーションを設定する場合には非常に役立ちます。
