transitionとtransform、2つの道具がそろいました。今回は組み合わせて、Webでよく見るカードが持ち上がる演出を作ってみます。
カードが持ち上がる演出
カーソルを乗せてみてください。
種明かしは単純です。:hoverのときtransform: translateY(-6px)で少し上へ、box-shadowを濃く・広くしているだけ。この2つをtransitionでなめらかにしています。
押しごたえを出す：active も使う
:hover（乗っている間）に加えて、:active（押している間）も指定すると、クリックした瞬間の押しごたえが出ます。
:activeは、マウスのボタンを押し下げている間だけ効く状態。指を離すと:hover（乗っているだけの状態）に戻ります。
中身だけズームするカード
もう1つ、写真つきカードでよく見る「中の画像だけがじわっと拡大する」演出です。ポイントは、外側の枠にoverflow: hiddenをつけて、拡大したぶんを枠の外に見せないこと。
注目したいのはセレクタです。.photo-card:hover .photo-card__img——「カードにカーソルが乗ったとき、中の画像を変化させる」という書き方。ホバーを受け取る要素と、動かす要素は別々でもいいのです。この形を知っていると、演出の幅が一気に広がります。
このレッスンのまとめ
transitionはカンマ区切りで複数プロパティを同時になめらかにできる- 持ち上げ演出は
transform: translateY()＋box-shadowの組み合わせが定番 :activeで押した瞬間の反応、overflow: hiddenで中身だけズームも作れる- 動きは控えめが上品