Image FXcssimagelab.com
3D · 52 / 56

Gallery Wrap

The photo turns in perspective on hover and a wrapped canvas edge appears at its side, like a print on a shelf.

Image

Hover the preview to turn the canvas and reveal its edge.

Adjust
1100px
15deg
18px
550ms
Metadata
interaction
Hover · static fallback
browser
Modern evergreen
reduced motion
included
touch fallback
Static on touch
Edit the CSS above — the preview updates live.

About Gallery Wrap

Gallery Wrap makes the photo read as a gallery-wrapped canvas print: on hover it turns in perspective and a real side face (a ::after strip that duplicates the image via --ifx-src) swings into view, like the canvas continuing around the stretcher bar. Set --ifx-src on the figure to the SAME url() as the img (the generated HTML/React does this). At rest the side face is folded edge-on (invisible) and the photo is flat, so touch and keyboard-without-focus stay static. Requires a wrapper with surrounding margin (it turns outside the box). Tune --ifx-depth (perspective), --ifx-turn (turn angle, keep modest) and --ifx-side (edge thickness, keep small). It rests flat on touch and under reduced motion; keep the @media (hover) wrapper and :focus-within selector.

Use cases

  • portfolio
  • gallery
  • print
  • hero

Browser support

Modern evergreen. Give the figure surrounding space (a wrapper margin).

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.