Pure CSS to achieve hover image pop-out pop-up effect example code

Pure CSS to achieve hover image pop-out pop-up effect example code

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 figure::before , and the foreground element is represented by figure img . When the mouse hover over figure element, the background element becomes larger, and the foreground element becomes larger and moves upward, thereby achieving a pop-up effect visually.

Background element figure::before

Foreground element figure img

1. Use overflow: hidden

The html structure of the main element consists of an img element wrapped in a figure element:

<figure>
  <img src='./man.png' alt='Irma'>
</figure>

Two variables --hov and --not-hov are set in css to control the magnification and displacement effects when hover elements. Add overflow: hidden to figure element and set padding-top: 5% to prevent the foreground element from being cut off when it exceeds the background element (optional: clamp() function is used to dynamically set border-radius to dynamically respond to page zooming)

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 clip-path: inset()

<figure>
  <img src='./man.png' alt='Irma'>
</figure>

The style is basically the same as the first one, using clip-path to clip the circular background area.

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)

Recommend

Detailed tutorial for installing mysql 8.0.12 under Windows

This article shares with you a detailed tutorial ...

CSS achieves a proportional display effect of an element with fixed height and width

Using padding-top percentage can achieve a fixed ...

MySQL master-slave configuration study notes

● I was planning to buy some cloud data to provid...

Two methods to implement Mysql remote connection configuration

Two methods to implement Mysql remote connection ...

Tomcat exception solution (Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986)

1. Scenario display The tomcat log occasionally r...

MySQL 5.7.21 winx64 installation and configuration method graphic tutorial

This article summarizes the notes for installing ...

A commonplace technique for implementing triangles using CSS (multiple methods)

In some interview experiences, you can often see ...

How to install MySQL database on Ubuntu

Ubuntu is a free and open source desktop PC opera...

Detailed deployment steps for MySQL MHA high availability configuration and failover

Table of contents 1. Introduction to MHA 1. What ...

Use vue to implement handwritten signature function

Personal implementation screenshots: Install: npm...

CSS3 implements footer fixed at the bottom (always at the bottom no matter how high the page is)

Preface Fix the footer area at the bottom. No mat...

MySQL 1130 exception, unable to log in remotely solution

Table of contents question: 1. Enable remote logi...

Directory permissions when creating a container with Docker

When I was writing a project yesterday, I needed ...

Element tree control integrates a drop-down menu with icons (tree+dropdown+input)

Table of contents Requirements: Implementation st...

The difference between Vue interpolation expression and v-text directive

Table of contents 1. Use plugin expressions 2. Us...