html5 图片hover,关于html5:两种纯CSS方式实现hover图片popout弹出效果

实现原理

次要图形的组成元素由背景和前景图两个元素，以下示例代码中，背景元素应用伪元素 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));

display: grid;

place-self: center;

margin: 0;

padding-top: 5%;

transform: scale(calc(1 - .1*var(--not-hov)));

overflow: hidden;

border-radius: 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em);

}</