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

投稿者

ueshin0620 いいね1 お気に入り登録

プレイ回数569 難易度(4.9) 456打長文

カーソルを合わせるとアニメーションでズームしたり、回転したりする画像のhtmlとCSSです。個人練習用ですが少し解説を入れています。

問題文

ふりがな非表示ふりがな表示

(＜ｄｉｖ　ｃｌａｓｓ＝”ｚｏｏｍｉｍｇ”＞＜ｉｍｇ　ｓｒｃ＝”．ｊｐｇ”　／＞＜／ｄｉｖ＞)

カーソルを合わせたら画像をズームするhtmlとcss

(．ｚｏｏｍｉｍｇ　｛　ｗｉｄｔｈ：　２４０ｐｘ；　ｈｅｉｇｈｔ：　１５０ｐｘ；)

css横幅と縦のサイズ

(ｏｖｅｒｆｌｏｗ：　ｈｉｄｄｅｎ；　｝)

ズームした画像が縦横のサイズから、はみ出ないようにする

(．ｚｏｏｍｉｍｇ　ｉｍｇ　｛　ｔｒａｎｓｉｔｉｏｎ：　０．５ｓ；)

transitionでズームにかかる時間を設定（今回は0.5秒）

(ｗｉｄｔｈ：　２４０ｐｘ；　ｄｉｓｐｌａｙ：　ｂｌｏｃｋ；　　｝)

横幅とかも決める

(．ｚｏｏｍｉｍｇ　ｉｍｇ：ｈｏｖｅｒ　｛　ｔｒａｎｓｆｏｒｍ：　ｓｃａｌｅ（１．１，　１．１）；　｝)

ズームの倍率を設定（縦1.1倍、横1.1倍）

(＜ｄｉｖ　ｃｌａｓｓ＝”ｚｉｍｇ”＞＜ｉｍｇ　ｓｒｃ＝”ｓ．ｐｎｇ”　／＞＜／ｄｉｖ＞)

カーソルを合わせたらZ方向に回転する画像のhtmlとcss

(．ｚｉｍｇ　｛　ｗｉｄｔｈ：　１００％；　ｈｅｉｇｈｔ：　１５０ｐｘ；)

横と縦のサイズを決める

(ｌｉｎｅ－ｈｅｉｇｈｔ：　１００ｐｘ；　ｔｅｘｔ－ａｌｉｇｎ：　ｃｅｎｔｅｒ；　｝)

行間、文字が中央寄り

(．ｚｉｍｇ　ｉｍｇ｛　ｗｉｄｔｈ：　２４０ｐｘ；　ｔｒａｎｓｉｔｉｏｎ：　１．０ｓ；)

横幅の設定とtransitionで回転にかかる時間を設定

(ｔｒａｎｓｆｏｒｍ：　ｒｏｔａｔｅｚ（　０ｄｅｇ　）；　｝)

Z方向の角度の初期状態を設定（ZをXやYに変えると回転方向が変わります）

(．ｚｉｍｇ：ｈｏｖｅｒ　ｉｍｇ　｛　ｔｒａｎｓｆｏｒｍ：　ｒｏｔａｔｅｚ（　３６０ｄｅｇ　）；　｝)

カーソルを合わせた後の角度を設定（ZをXやYに変えると回転方向が変わる）