やってみようカードにマウスを乗せてみてください（スマホでは押している間だけ変わります）
アニメーション・演出メジャー（よく見る）
ホバーエフェクト
Hover Effect / Hover Lift
マウスを乗せると、カードがふわっと浮き上がり、影が濃くなって中の写真が少し大きくなる。
別名ホバーマウスオーバーホバーアニメーション浮き上がるカード
どこで使われている？
- よく見かける場所
- ネット通販の商品一覧、ポートフォリオ、ブログの記事一覧
- 使うとよい場面
- パソコンで、押せる場所であることを伝えたいとき
- 避けたい場面
- スマホ（マウスがないので、それだけに頼らない）
補足スマホにはマウスがないので、押している間だけ変化する「押下状態（プレス）」で代わりにすることが多いです。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「ホバーエフェクト（Hover Effect / Hover Lift）」を実装してください。 動き：カードにマウスカーソルを乗せたとき、カードを少し上に移動させて影を濃くし、中の写真を少しだけ拡大する。カーソルが離れたら元に戻す。変化は0.2秒ほどでなめらかにする。 使う部品：CSS の :hover + transition
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | CSS の :hover + transition |
|---|---|
| iPhoneアプリなら | .hoverEffect()（iPad のポインター向け） |
| Androidアプリなら | Modifier.hoverable（主にタブレット・PC向け） |
| Flutterなら | MouseRegion（InkWell の onHover） |
| React Nativeなら | Pressable の onHoverIn（Web・iPad向け） |