忍者CODE

ログイン

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

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
画像を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秒)を入れております。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET