悬停时内部画面放大加饱和,遮罩与标题淡入
← 返回 卡片 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .mz{position:relative;width:250px;height:160px;margin:36px auto;border-radius:14px;overflow:hidden;cursor:pointer}
.fx .mz .pic{position:absolute;inset:0;background:linear-gradient(135deg,#4a9eff,#57ab5a,#e78a3e);transition:transform .6s ease,filter .6s}
.fx .mz .cap{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;color:#fff;font-weight:700;background:linear-gradient(transparent,rgba(0,0,0,.6));opacity:0;transition:opacity .4s}
.fx .mz:hover .pic{transform:scale(1.12);filter:saturate(1.4)}
.fx .mz:hover .cap{opacity:1}<div class="fx">
<div class="mz"><div class="pic"></div><div class="cap">悬停放大 + 遮罩淡入</div></div>
</div>