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

1 minute Vue implements right-click menu

Table of contents Rendering Install Code Implemen...

Detailed process of installing nginx1.9.1 on centos8

1.17.9 More delicious, really Nginx download addr...

Table of CSS Bugs Caused by hasLayout

IE has had problems for a long time. When everyone...

Introduction to the use of html area image hotspots with a list of related properties

The <area> tag is mainly used in image maps...

Implementation of Docker private warehouse registry deployment

As more and more Docker images are used, there ne...

Detailed tutorial on minimizing the installation of CentOS 8.1 virtual machine in VirtualBox

1. Download related tools and images Download Lin...

Node connects to MySQL and encapsulates its implementation code for adding, deleting, modifying and checking

Table of contents Node connects to Mysql Install ...

js and jquery to achieve tab status bar switching effect

Today we will make a simple case, using js and jq...

CSS+HTML to realize the top navigation bar function

Implementation of navigation bar, fixed top navig...

Practice of deploying web applications written in Python with Docker

Table of contents 1. Install Docker 2. Write code...

Implementation of grayscale release with Nginx and Lua

Install memcached yum install -y memcached #Start...

10 Website Usability Tips Everyone Should Know

Let’s not waste any more time and get straight to...

Several methods for js to determine the horizontal and vertical screen viewport detection of mobile terminals

Table of contents 1. How to obtain different view...

Design Theory: Ten Tips for Content Presentation

<br /> Focusing on the three aspects of text...

WeChat applet custom tabBar step record

Table of contents 1. Introduction 2. Customize ta...