实现原理主要图形元素由背景图和前景图元素组成。下面的示例代码中，背景元素用伪元素figure::before表示，前景元素使用figureimg表示当鼠标悬停在figure元素上时，背景元素会放大，并且前景元素将被放大并向上移动，从而在视觉上实现弹出效果。背景元素图::在前景元素图img1之前。使用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));显示：网格；自我定位：中心；保证金：0；顶部填充：5%；变换：比例（计算（1-.1*var（--not-hov）））；溢出：隐藏；border-radius:00clamp(4em,20vw,15em)clamp(4em,20vw,15em);}figure::before,figureimg{grid-area:1/1;place-self:endcenter;}figure::before{content:"";填充：clamp(4em,20vw,15em);边界半径：50%；背景：url('./bg.png')50%/cover;}figure:hover{--hov:1;}img{width:calc(2*clamp(4em,20vw,15em));border-radius:clamp(4em,20vw,15em);转换：translateY(calc((1-var(--hov))*10%))scale(calc(1.25+.05*var(--hov)));}2。使用clip-path：inset()方法
样式基本和第一种一样，使用clip-path进行Cut关闭圆形背景区域。图{--hov:0;--not-hov:calc(1-var(--hov));显示：网格；自我定位：中心；保证金：0；顶部填充：5%；转换：规模（计算（1-.1*var（--not-hov）））;剪辑路径：插图（0轮00钳位（4em、20vw、15em）钳位（4em、20vw、15em））；}图::之前，图img{网格区域：1/1；place-self:endcenter;}figure::before{content:"";填充：clamp(4em,20vw,15em);边界半径：50%；背景：url('./bg.png')50%/cover;}figure:hover{--hov:1;}figure:hover::before{box-shadow:1px1px10pxrgba(0,0,0,.3);}img{width:calc(2*clamp(4em,20vw,15em));边界半径：钳位（4em，20vw，15em）；transform:translateY(calc((1-var(--hov))*10%))scale(calc(1.25+.05*var(--hov)));}完整示例
使用溢出：隐藏方式
使用clip-path:path()方式
正文{显示：网格；背景：#FDFC47；背景：-webkit-linear-gradient（向右，#24FE41，#FDFC47）；背景：线性渐变（向右，#24FE41，#FDFC47）；}图{--hov：0；--not-hov:calc(1-var(--hov));显示：网格；自我定位：中心；保证金：0；顶部填充：5%；变换：比例（calc（1-.1*var（--not-hov）））;}图：nth-??of-type（1）{溢出：隐藏;border-radius:00clamp(4em,20vw,15em)clamp(4em,20vw,15em);}figure:nth-of-type(2){clip-path:inset(0round00clamp(4em,20vw),15em)clamp(4em,20vw,15em));}figure,figureimg{transition:transform0.2sease-in-out;}figure::before,figureimg{grid-area:1/1;place-self:endcenter;}figure::before{padding:clamp(4em,20vw,15em);边界半径：50%；背景：url('./bg.png')50%/封面；内容：””;transition:.25slinear;}figure:hover{--hov:1;}figure:hover::before{box-shadow:1px1px10pxrgba(0,0,0,.3);}img{width:calc(2*夹具(4em,20vw,15em));边界半径：钳位（4em，20vw，15em）；转换：translateY(calc((1-var(--hov))*10%))scale(calc(1.25+.05*var(--hov)));}
