Image FXcssimagelab.com
Image
Studio fashion portrait in warm light

Hover to swing the panels open.

Mask · 28 / 35

Barn Doors

Two panels split apart like barn doors to reveal the image.

Adjust
560ms
4px
Metadata
interaction
Hover · static fallback
browser
Universal
reduced motion
included
touch fallback
Static on touch
Edit the CSS above — the preview updates live.

About Barn Doors

Barn Doors hides the image behind two panels that slide apart to the left and right on hover, like opening barn doors. Tune --ifx-panel to match your section background, --ifx-duration/--ifx-ease for the swing, and --ifx-radius for the card corners. The panels live in an @media (hover) block so touch and keyboard-focus users still get the full image with no essential content trapped behind the reveal.

Use cases

  • gallery
  • portfolio
  • editorial

Browser support

Universal.

Accessibility

  • Essential content is never hidden behind hover.
  • Includes a prefers-reduced-motion fallback.
  • Touch fallback: static on touch.
  • Keyboard accessible — the effect also triggers on focus-within.