实现原理
主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标hover悬浮至figure元素时,背景元素产生变大效果,前景元素产生变大并向上移动效果,从而从视觉上实现弹出效果。
背景元素 figure::before
前景元素 figure img
1. 使用 overflow: hidden 方式
主体元素的 html 结构由一个 figure 元素包裹的 img 元素构成:
在 css 中设置了两个变量 --hov 和 --not-hov 用于控制 hover 元素时的放大以及位移效果。并对 figure 元素添加 overflow: hidden,设置 padding-top: 5% 用于前景元素超出背景元素时不被截断(非必需:并使用了 clamp() 函数用来动态设定 border-radius 以动态响应页面缩放)figure {
--hov: 0;
--not-hov: calc(1 - var(--hov));