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

Summary of 11 amazing JavaScript code refactoring best practices

Table of contents 1. Extracting functions 2. Merg...

Summary of commonly used tool functions in Vue projects

Table of contents Preface 1. Custom focus command...

Use CSS to draw a file upload pattern

As shown below, if it were you, how would you ach...

Quick solution for forgetting MySQL8 password

Preface When we forget the MySQL database passwor...

Detailed explanation of commonly used styles in CSS3 [Basic text and font styles]

Summary: In order to make your web page look more...

Graphical tutorial on installing CentOS 7.3 on VMWare

Illustrated CentOS 7.3 installation steps for you...

mysql is not an internal command error solution

The error "mysql is not an internal command&...

Several specific methods of Mysql space cleaning

Table of contents Preface 1. Check the file disk ...

Linux sftp command usage

Concept of SFTP sftp is the abbreviation of Secur...

How to import CSS styles into HTML external style sheets

The link-in style is to put all the styles in one...

Some summary of MySQL's fuzzy query like

1. Common usage: (1) Use with % % represents a wi...

Summary of MySQL lock knowledge points

The concept of lock ①. Lock, in real life, is a t...

How to install centOS8 in VMware12 (tutorial on installing centos8 in vm virtual machine)

CentOS8 was released a few days ago. Although it ...

How to use binlog for data recovery in MySQL

Preface Recently, a data was operated incorrectly...

How to insert weather forecast into your website

We hope to insert the weather forecast into the w...