html,cssカーソルを合わせると動く画像

関連タイピング
-
個人練習用の英語長文です。
プレイ回数567英語長文795打 -
日本語訳なし、しゃべることと歩くことの比較
プレイ回数608英語長文1097打 -
自作のハンバーガーメニューを作成しましょう!
プレイ回数3219英語長文721打 -
chatGPTに作らせた部分一致検索サイトです。
プレイ回数845長文590打 -
自分練習用、英語長文:夢について
プレイ回数515英語長文542打 -
htmlやcssのタイピングです。
プレイ回数6745英語長文120秒 -
動きのあるメニューバーのサンプルHTML、CSS
プレイ回数120英語長文2586打 -
日本語訳なし、個人練習用に作った英語長文です
プレイ回数4055英語長文673打
問題文
(<div class=”zoomimg”><img src=”.jpg” /> </div>)
カーソルを合わせたら画像をズームするhtmlとcss
(.zoomimg { width: 240px; height: 150px;)
css横幅と縦のサイズ
(overflow: hidden; })
ズームした画像が縦横のサイズから、はみ出ないようにする
(.zoomimg img { transition: 0.5s;)
transitionでズームにかかる時間を設定(今回は0.5秒)
(width: 240px; display: block; })
横幅とかも決める
(.zoomimg img:hover { transform: scale(1.1, 1.1); })
ズームの倍率を設定(縦1.1倍、横1.1倍)
(<div class=”zimg”><img src=”s.png” /></div>)
カーソルを合わせたらZ方向に回転する画像のhtmlとcss
(.zimg { width: 100%; height: 150px;)
横と縦のサイズを決める
(line-height: 100px; text-align: center; })
行間、文字が中央寄り
(.zimg img{ width: 240px; transition: 1.0s;)
横幅の設定とtransitionで回転にかかる時間を設定
(transform: rotatez( 0deg ); })
Z方向の角度の初期状態を設定(ZをXやYに変えると回転方向が変わります)
(.zimg:hover img { transform: rotatez( 360deg ); })
カーソルを合わせた後の角度を設定(ZをXやYに変えると回転方向が変わる)