Implementation principle The main graphics are composed of two elements: background and foreground. In the following sample code, the background element is represented by the pseudo-element Background element Foreground element 1. Use The <figure> <img src='./man.png' alt='Irma'> </figure> Two variables 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. Use <figure> <img src='./man.png' alt='Irma'> </figure> The style is basically the same as the first one, using 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))); } Complete Example <h2>Use overflow: hidden</h2> <figure> <img src='./man.png' alt='Irma'> </figure> <h2>Use clip-path: path() method</h2> <figure> <img src='./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))); } This is the end of this article about how to achieve hover image pop-out effect with pure CSS. For more relevant CSS content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Summary of SQL deduplication methods
>>: Payment function implementation in vue project (WeChat payment and Alipay payment)
This article shares with you a detailed tutorial ...
Using padding-top percentage can achieve a fixed ...
● I was planning to buy some cloud data to provid...
Two methods to implement Mysql remote connection ...
1. Scenario display The tomcat log occasionally r...
This article summarizes the notes for installing ...
In some interview experiences, you can often see ...
Ubuntu is a free and open source desktop PC opera...
Table of contents 1. Introduction to MHA 1. What ...
Personal implementation screenshots: Install: npm...
Preface Fix the footer area at the bottom. No mat...
Table of contents question: 1. Enable remote logi...
When I was writing a project yesterday, I needed ...
Table of contents Requirements: Implementation st...
Table of contents 1. Use plugin expressions 2. Us...