HTML_CSS
Googleでログイン問題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を使いこなせるようになれば、様々なボタンを作ることができます。
色々なプロパティと組み合わせて、独自性のあるボタンを考えるのも面白いですよ!
少し難易度は上がりますが、transitionプロパティなどを使いこなせるようになったらanimationプロパティというものに挑戦するといいかと思います。
@keyframesというものを定義する必要があり、より細かくアニメーションを設定する場合には非常に役立ちます。
色々なプロパティと組み合わせて、独自性のあるボタンを考えるのも面白いですよ!
少し難易度は上がりますが、transitionプロパティなどを使いこなせるようになったらanimationプロパティというものに挑戦するといいかと思います。
@keyframesというものを定義する必要があり、より細かくアニメーションを設定する場合には非常に役立ちます。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
今回は、画像の幅を80%から100%に変えるだけなのでwidth: 100%を入れてあげてアニメーションでtransition: 1s(1秒)を入れております。