悬停时封面上移，底部信息条从下潜出
← 返回 卡片 类特效列表悬停后从底部滑出的信息
上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .su{position:relative;width:250px;height:160px;margin:36px auto;border-radius:14px;overflow:hidden}
.fx .su .cover{position:absolute;inset:0;background:linear-gradient(135deg,#a371f7,#f778ba);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:700;transition:transform .4s ease}
.fx .su .info{position:absolute;left:0;right:0;bottom:0;padding:14px;background:rgba(13,17,23,.88);color:#fff;transform:translateY(100%);transition:transform .4s ease}
.fx .su .info p{margin:0;font-size:13px;color:#9aa7b8}
.fx .su .info b{display:block;margin-bottom:4px}
.fx .su:hover .cover{transform:translateY(-24px)}
.fx .su:hover .info{transform:translateY(0)}<div class="fx">
<div class="su"><div class="cover">封面</div><div class="info"><b>详情标题</b><p>悬停后从底部滑出的信息</p></div></div>
</div>