Hover Scale
ホバースケール
どんな動き？
カーソルを乗せている間だけ要素がひと回り大きくなるシンプルなホバーアニメーション。拡大率を小さく抑えることで上品な反応になり、離れると元のサイズへ滑らかに戻る。ボタンや画像、アイコンなど、あらゆるクリッカブル要素に使える汎用性の高いホバー表現。
よく使う場所
ボタンアイコンサムネイル画像
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Scale the element up slightly while the cursor hovers over it.Trigger:
Mouse enters the element (hover).
Initial state:
transform: scale(1)
Animation:
The element grows smoothly to a slightly larger size and holds while hovered.
Final state:
transform: scale(1.05)
Reverses smoothly on mouse leave.
Timing:
duration: 0.25s, easing: ease-out.実装方法の候補
この動きは以下の技術で実装できます。
CSS :hover + transform: scale
別名・関連ワード
Hover GrowScale on HoverHover Zoom