Beispielcode für reines CSS zum Erzielen eines Popup-Popup-Effekts beim Hovern von Bildern

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

Figur {
  --hov: 0;
  --nicht-hov: calc(1 - var(--hov));
  Anzeige: Raster;
  Ort-Selbst: Zentrum;
  Rand: 0;
  Polsterung oben: 5%;
  transformieren: Skalierung(kalkulieren(1 - .1*var(--not-hov)));
  Überlauf: versteckt;
  Rahmenradius: 0 0 Klammer (4em, 20vw, 15em) Klammer (4em, 20vw, 15em);
}
Abbildung::vorher, Abbildung img {
  Rasterfläche: 1/1;
  Ort-selbst: Ende Mitte;
}
Abbildung::vor {
  Inhalt: "";
  Polsterung: Klammer (4em, 20vw, 15em);
  Randradius: 50 %;
  Hintergrund: URL('./bg.png') 50 %/Cover;
}
Abbildung:schweben {
  --hov: 1;
}
img {
  Breite: berechnet (2 * Klemme (4em, 20vw, 15em));
  Rahmenradius: Klammer (4em, 20vw, 15em);
  transformieren: übersetzenY(calc((1 - var(--hov))*10%)) skalieren(calc(1,25 + 0,05*var(--hov)));
}

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

Figur {
  --hov: 0;
  --nicht-hov: calc(1 - var(--hov));
  Anzeige: Raster;
  Ort-Selbst: Zentrum;
  Rand: 0;
  Polsterung oben: 5%;
  transformieren: Skalierung(kalkulieren(1 - .1*var(--not-hov)));
  Clip-Pfad: Einschub (0 rund 0 0 Klammer (4em, 20vw, 15em) Klammer (4em, 20vw, 15em));
}
Abbildung::vorher, Abbildung img {
  Rasterfläche: 1/1;
  Ort-selbst: Ende Mitte;
}
Abbildung::vor {
  Inhalt: "";
  Polsterung: Klammer (4em, 20vw, 15em);
  Randradius: 50 %;
  Hintergrund: URL('./bg.png') 50 %/Cover;
}
Abbildung:schweben {
  --hov: 1;
}
Abbildung:hover::vor {
  Kastenschatten: 1px 1px 10px rgba(0, 0, 0, .3);
}
img {
  Breite: berechnet (2 * Klemme (4em, 20vw, 15em));
  Rahmenradius: Klammer (4em, 20vw, 15em);
  transformieren: übersetzenY(calc((1 - var(--hov))*10%)) skalieren(calc(1,25 + 0,05*var(--hov)));
}

<h2>Überlauf verwenden: versteckt</h2>
  <Abbildung>
    <img src='./man.png' alt='Irma'>
  </figure>
  <h2>Clip-Pfad verwenden: path()-Methode</h2>
  <Abbildung>
    <img src='./man.png' alt='Irma'>
  </figure>

Körper {
  Anzeige: Raster;
  Hintergrund: #FDFC47;
  Hintergrund: -webkit-linear-gradient (nach rechts, #24FE41, #FDFC47);
  Hintergrund: linearer Farbverlauf (nach rechts, #24FE41, #FDFC47);
}
Figur {
  --hov: 0;
  --nicht-hov: calc(1 - var(--hov));
  Anzeige: Raster;
  Ort-Selbst: Zentrum;
  Rand: 0;
  Polsterung oben: 5%;
  transformieren: Skalierung(kalkulieren(1 - .1*var(--not-hov)));
}
Abbildung:n-ter-Typ(1) {
  Überlauf: versteckt;
  Rahmenradius: 0 0 Klammer (4em, 20vw, 15em) Klammer (4em, 20vw, 15em);
}
Abbildung:n-ter-Typ(2) {
  Clip-Pfad: Einschub (0 rund 0 0 Klammer (4em, 20vw, 15em) Klammer (4em, 20vw, 15em));
}
Abbildung, Abbildung img {
  Übergang: Transformation 0,2 s, leichtes Ein- und Aussteigen;
}
Abbildung::vorher, Abbildung img {
  Rasterfläche: 1/1;
  Ort-selbst: Ende Mitte;
}
Abbildung::vor {
  Polsterung: Klammer (4em, 20vw, 15em);
  Randradius: 50 %;
  Hintergrund: URL('./bg.png') 50 %/Cover;
  Inhalt: "";
  Übergang: 0,25 s linear;
}
Abbildung:schweben {
  --hov: 1;
}
Abbildung:hover::vor {
  Kastenschatten: 1px 1px 10px rgba(0, 0, 0, .3);
}
img {
  Breite: berechnet (2 * Klemme (4em, 20vw, 15em));
  Rahmenradius: Klammer (4em, 20vw, 15em);
  transformieren: übersetzenY(calc((1 - var(--hov))*10%)) skalieren(calc(1,25 + 0,05*var(--hov)));
}