Révélation d'Image au Survol

Upload two images and reveal the second on hover with fade, slide, circle and 3D flip effects

100 % gratuit. Fonctionne entièrement dans votre navigateur : vos fichiers et données ne quittent jamais votre appareil et rien n'est envoyé à un serveur.

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

À propos de cet outil

A hover reveal shows one image at rest and a second image when someone points at it. This generator stacks your before and after photos, then applies fade, slide, circular mask, curtain, 3D flip, glitch and more. Phones do not hover, so you can switch the preview to tap or an automatic loop. Copy HTML and CSS (plus a little JavaScript for click or auto). Images stay on your device.

Comment utiliser cet outil

  1. Upload two imagesPrimary is visible at rest. Hover image is the reveal. Demo slides are there if you want to try styles first.
  2. Pick a revealFade, slide, zoom, blur, circular, split, curtain, flip, glitch, liquid and mask.
  3. Set interactionHover on desktop, tap on mobile, or autoplay. Optional captions for before and after.
  4. Copy the codeHTML, CSS and JavaScript if you chose click or auto. ZIP download included.

Pourquoi l’utiliser

  • Eighteen reveal styles including circular mask and 3D flip.
  • Tap mode so the effect still works on phones.
  • Optional captions on each state.
  • Private: images never leave the browser.

Usages courants

  • Before and after a photo retouch.
  • A product colourway that appears on hover.
  • A portfolio tile that reveals the live site screenshot.

Erreurs à éviter

  • Relying on hover alone. Phones have no hover state, so the second image is unreachable - use the click mode for touch.
  • Pairing two images of different aspect ratios, which makes the reveal jump as the crop changes between them.
  • Loading a large second image eagerly. It competes with the first image for bandwidth and delays your LCP.
  • Leaving the alt text identical on both images, so a screen reader announces the same thing twice.
  • Using a spotlight or torch reveal on a page where the two images look nearly identical - the effect only reads when the difference is obvious.

Questions fréquentes

Hover is not available on touch. Use Click (tap) or Automatic Preview so the second image still appears.

Yes. Optional before and after captions with colour and position (top, centre, bottom).

Similar aspect ratios look best. Object-fit (cover or contain) handles small mismatches.

Yes. Copy it into commercial and client work. No attribution is required.

Les gens recherchent aussi

  • image hover effect css
  • before after image slider
  • css image reveal on hover
  • hover to change image css
  • spotlight hover effect css
  • image comparison slider free
  • css mask reveal effect

Related guides