两种纯CSS方式实现hover图片pop-out弹出效果

https://img2020.cnblogs.com/blog/772544/202104/772544-20210415165134331-967118217.gif

文章插图
【两种纯CSS方式实现hover图片pop-out弹出效果】在 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);}figure::before, figure img {grid-area: 1/1;place-self: end center;}figure::before {content: "";padding: clamp(4em, 20vw, 15em);border-radius: 50%;background: url('./bg.png') 50%/cover;}figure:hover {--hov: 1;}img {width: calc(2*clamp(4em, 20vw, 15em));border-radius: clamp(4em, 20vw, 15em);transform: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));}

2. 使用 clip-path: inset() 方式<figure><img src='https://tazarkount.com/read/man.png' alt='Irma'></figure>样式基本上与第一种相同，使用 clip-path 来截取圆形背景区域。

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)));clip-path: inset(0 round 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em));}figure::before, figure img {grid-area: 1/1;place-self: end center;}figure::before {content: "";padding: clamp(4em, 20vw, 15em);border-radius: 50%;background: url('./bg.png') 50%/cover;}figure:hover {--hov: 1;}figure:hover::before {box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);}img {width: calc(2*clamp(4em, 20vw, 15em));border-radius: clamp(4em, 20vw, 15em);transform: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));}

完整示例

<h2>使用overflow: hidden方式</h2><figure><img src='https://tazarkount.com/read/man.png' alt='Irma'></figure><h2>使用clip-path: path()方式</h2><figure><img src='https://tazarkount.com/read/man.png' alt='Irma'></figure>

body {display: grid;background: #FDFC47;background: -webkit-linear-gradient(to right, #24FE41, #FDFC47);background: linear-gradient(to right, #24FE41, #FDFC47);}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)));}figure:nth-of-type(1) {overflow: hidden;border-radius: 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em);}figure:nth-of-type(2) {clip-path: inset(0 round 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em));}figure, figure img {transition: transform 0.2s ease-in-out;}figure::before, figure img {grid-area: 1/1;place-self: end center;}figure::before {padding: clamp(4em, 20vw, 15em);border-radius: 50%;background: url('./bg.png') 50%/cover;content: "";transition: .25s linear;}figure:hover {--hov: 1;}figure:hover::before {box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);}img {width: calc(2*clamp(4em, 20vw, 15em));border-radius: clamp(4em, 20vw, 15em);transform: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));}

文章地址： https://www.cnblogs.com/dragonir/p/14663284.html 作者：dragonir