Bild-Hover-Reveal

Lade zwei Bilder hoch und enthülle das zweite bei Hover mit Fade-, Slide-, Kreis- und 3D-Flip-Effekten

100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.

compare Preview

code Export

.ugrv{position:relative;width:640px;max-width:100%;height:380px;border-radius:16px;overflow:hidden;border:0;box-shadow:0 18px 40px rgba(0,0,0,.28);cursor:pointer;user-select:none}
.ugrv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ugrv-a{z-index:1}
.ugrv-b{z-index:2}
.ugrv-lab{position:absolute;left:50%;inset:auto auto 12px;transform:translateX(-50%);z-index:4;padding:6px 10px;border-radius:999px;font:700 12px system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#ffffff;background:rgba(0,0,0,.42);pointer-events:none}
.ugrv-lab-b{opacity:0}
.ugrv:hover .ugrv-lab-a,.ugrv.on .ugrv-lab-a{opacity:0}
.ugrv:hover .ugrv-lab-b,.ugrv.on .ugrv-lab-b{opacity:1}
.ugrv-lab{transition:opacity 0.55s ease}
@media (hover:none){.ugrv[data-mode="hover"] .ugrv-lab{opacity:1}}
.ugrv-b{opacity:0;transition:opacity 0.55s ease}
.ugrv:hover .ugrv-b,.ugrv.on .ugrv-b{opacity:1}

Jump to the next useful tool without leaving your flow.

See more

Über dieses Tool

Ein Hover-Reveal zeigt ein Bild in Ruhe und ein zweites, wenn jemand darauf zeigt. Dieser Generator stapelt deine Vorher- und Nachher-Fotos und wendet Fade, Slide, kreisförmige Maske, Vorhang, 3D-Flip, Glitch und mehr an. Handys haben kein Hover, daher kannst du die Vorschau auf Tippen oder eine automatische Schleife umschalten. Kopiere HTML und CSS (plus ein wenig JavaScript für Klick oder Auto). Bilder bleiben auf deinem Gerät.

So verwendest du dieses Tool

  1. Zwei Bilder hochladenPrimär ist in Ruhe sichtbar. Hover-Bild ist das Reveal. Demo-Slides sind da, falls du Stile zuerst ausprobieren willst.
  2. Ein Reveal wählenFade, Slide, Zoom, Blur, kreisförmig, Split, Vorhang, Flip, Glitch, Liquid und Maske.
  3. Interaktion setzenHover am Desktop, Tippen am Mobilgerät oder Autoplay. Optionale Beschriftungen für Vorher und Nachher.
  4. Den Code kopierenHTML, CSS und JavaScript, wenn du Klick oder Auto gewählt hast. ZIP-Download inklusive.

Warum es nutzen

  • Achtzehn Reveal-Stile inklusive kreisförmiger Maske und 3D-Flip.
  • Tipp-Modus, damit der Effekt auf Handys weiter funktioniert.
  • Optionale Beschriftungen in jedem Zustand.
  • Privat: Bilder verlassen den Browser nie.

Häufige Anwendungen

  • Vorher und nachher einer Foto-Retusche.
  • Eine Produkt-Farbvariante, die bei Hover erscheint.
  • Eine Portfolio-Kachel, die den Live-Site-Screenshot enthüllt.

Fehler, die du vermeiden solltest

  • Sich allein auf Hover zu verlassen. Handys haben keinen Hover-Zustand, das zweite Bild ist also unerreichbar - nutze den Klick-Modus für Touch.
  • Zwei Bilder mit unterschiedlichen Seitenverhältnissen zu paaren, wodurch das Reveal springt, wenn sich der Crop dazwischen ändert.
  • Ein großes zweites Bild eifrig zu laden. Es konkurriert mit dem ersten Bild um Bandbreite und verzögert dein LCP.
  • Denselben Alt-Text auf beiden Bildern zu lassen, sodass ein Screenreader zweimal dasselbe ansagt.
  • Ein Spotlight- oder Taschenlampen-Reveal auf einer Seite zu nutzen, auf der die zwei Bilder fast identisch aussehen - der Effekt liest sich nur, wenn der Unterschied offensichtlich ist.

Häufig gestellte Fragen

Hover ist auf Touch nicht verfügbar. Nutze Klick (Tippen) oder automatische Vorschau, damit das zweite Bild trotzdem erscheint.

Ja. Optionale Vorher- und Nachher-Beschriftungen mit Farbe und Position (oben, mitte, unten).

Ähnliche Seitenverhältnisse sehen am besten aus. Object-fit (cover oder contain) fängt kleine Abweichungen auf.

Ja. Kopiere ihn in kommerzielle und Kundenarbeit. Keine Namensnennung nötig.

Andere suchen auch nach

  • bild hover effekt css
  • vorher nachher bild slider
  • css bild reveal bei hover
  • hover zum bildwechsel css
  • spotlight hover effekt css
  • bildvergleich slider kostenlos
  • css mask reveal effekt

Related guides