Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Realize the principle of

The main graphics consist of background and foreground elements. In the following example code, the background element is represented by the pseudo-element figure::before, and the foreground element is represented by figure img. When hover hover to figure element, the background element will produce a larger effect. The foreground element enlarges and moves up to visually pop up.

Background elementsfigure::before

Foreground elementsfigure img

1. Useoverflow: hiddenway

The HTML structure of the body element consists of an IMG element wrapped around a figure element:

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

Two variables — HOv and –not-hov — are set in the CSS to control the zoom and displacement effects of the hover element. Add overflow: hidden to figure elements and set padding-top: 5% to prevent foreground elements from being truncated when they exceed background elements (not required: also use clamp() function to dynamically set border-radius to dynamically respond to page scaling)

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)));
}
Copy the code

2. Useclip-path: inset()way

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

The style is basically the same as the first, using clip-path to capture 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)));
}
Copy the code

Complete sample

  <h2>Use overflow: Hidden</h2>
  <figure>
    <img src='./man.png' alt='Irma'>
  </figure>
  <h2>The clip-path: path() mode is used</h2>
  <figure>
    <img src='./man.png' alt='Irma'>
  </figure>
Copy the code
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.2 s 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)));
}
Copy the code