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

JS realizes picture digital clock

This article example shares the specific code of ...

JavaScript Sandbox Exploration

Table of contents 1. Scenario 2. Basic functions ...

VMware Workstation Pro 16 Graphic Tutorial on Building CentOS8 Virtual Machine Cluster

Table of contents Preparation Install VMware Work...

Deleting the database and running away? How to use xtraback to back up the MySQL database

1. The mysqldump backup method uses logical backu...

How to use MySQL's geometry type to handle longitude and latitude distance problems

Create a table CREATE TABLE `map` ( `id` int(11) ...

JavaScript to switch multiple pictures

This article shares the specific code of JavaScri...

Axios project with 77.9K GitHub repository: What are the things worth learning?

Table of contents Preface 1. Introduction to Axio...

A brief discussion on Linux signal mechanism

Table of contents 1. Signal List 1.1. Real-time s...

Introduction to the usage of common XHTML tags

There are many tags in XHTML, but only a few are ...

How to deploy MySQL 5.7 & 8.0 master-slave cluster using Docker

> Deploy MySQL 5.7 cluster master & slave ...

How to implement load balancing in MySQL

Preface MySQL is a high-speed, high-performance, ...

Detailed steps to build the TypeScript environment and deploy it to VSCode

Table of contents TypeScript environment construc...

Solve the problem of no my.cnf file in /etc when installing mysql on Linux

Today I wanted to change the mysql port, but I fo...

HTML tags: sub tag and sup tag

Today I will introduce two HTML tags that I don’t...

Vue implements button switching picture

This article example shares the specific code of ...