SCALE — Build Lab

カードのホバー浮き上がり

マイクロインタラクション

カードホバー時にわずかに浮く(translateY -2px + shadow強化)。

実装例
css
.card { transition: all .25s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }

カードのホバー浮き上がり

:LiTarget: 原則

カードホバー時にわずかに浮く(translateY -2px + shadow強化)。

:LiCode: 実装例

.card { transition: all .25s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }