Pengungkap Gambar saat Hover

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

100% gratis. Berjalan sepenuhnya di browser Anda - file dan data Anda tidak pernah meninggalkan perangkat Anda dan tidak ada yang diunggah ke server mana pun.

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

Tentang alat ini

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.

Cara menggunakan alat ini

  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.

Mengapa menggunakannya

  • 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.

Penggunaan umum

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

Kesalahan yang harus dihindari

  • 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.

Pertanyaan yang sering diajukan

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.

Orang juga mencari

  • 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