Apple NewsroomのようなホバーエフェクトをCSSで再現します。
カーソルをのせると、シャドウが広がりパネルが一回り大きくなります。
tvOSのような効果を再現したものと思われますが、 transform ではなく margin padding を transition させることでパネル内のコンテンツにtransformをかけず遠近感を出しています。
ホバーした時は、 padding の値を大きくして margin の値を小さくします
コード
.item {
margin: 3rem;
padding: 2rem;
box-shadow: 0 0 3rem 0 rgba(0, 0, 0, .001);
transition: box-shadow .1s linear, padding .1s linear, margin .1s linear;
&:hover {
margin: 2.5rem;
padding: 2.5rem;
box-shadow: 0 1.5rem 3rem 0rem rgba(0, 0, 0, .3);
}
}