遮罩淡入卡片 · 卡片
前端Wiki/CSS 特效合集/遮罩淡入卡片

遮罩淡入卡片

悬停时内部画面放大加饱和,遮罩与标题淡入

← 返回 卡片 类特效列表
悬停放大 + 遮罩淡入

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

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}

HTML 结构

HTML
<div class="fx">
<div class="mz"><div class="pic"></div><div class="cap">悬停放大 + 遮罩淡入</div></div>
</div>
实现要点:transform scale + filter saturate + 遮罩 opacity 三重过渡

其它卡片类特效

回到 前端Wiki 首页 · CSS 特效合集