悬停其中一张时其他自动缩小退让，聚焦感强
← 返回 卡片 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .gw{display:flex;gap:10px;justify-content:center;padding:30px 0}
.fx .gw .gi{width:80px;height:120px;border-radius:12px;background:linear-gradient(135deg,#4a9eff,#a371f7);transition:transform .3s,opacity .3s}
.fx .gw .gi:nth-child(2){background:linear-gradient(135deg,#f778ba,#e5534b)}
.fx .gw .gi:nth-child(3){background:linear-gradient(135deg,#57ab5a,#4a9eff)}
.fx .gw .gi:nth-child(4){background:linear-gradient(135deg,#e78a3e,#f7c873)}
.fx .gw .gi:hover{transform:scale(1.12)}
.fx .gw:has(.gi:hover) .gi:not(:hover){transform:scale(.92);opacity:.45}<div class="fx">
<div class="gw"><div class="gi"></div><div class="gi"></div><div class="gi"></div><div class="gi"></div></div>
</div>