Image FXcssimagelab.com
Frame · 35 / 56

Film Strip

Black film bands with perforated sprocket holes run along the top and bottom, like one frame of a 35mm negative.

Image
Green natural landscape

Hover the photo to apply the effect — move away to compare.

Adjust
14%
5px
24px
Metadata
interaction
Always on
browser
Modern — CSS masks
reduced motion
static
touch fallback
Identical on touch
Edit the CSS above — the preview updates live.

About Film Strip

Film Strip overlays two black film bands on the top and bottom of the photo, each punched with a row of round sprocket holes that reveal the image beneath — so a single photo reads as one frame of a 35mm negative. The bands are ::before/::after pseudo-elements; the holes are a repeating radial-gradient mask, so unlike a baked SVG the perforations are fully slider-driven. Tune --ifx-band (band height as a % so it scales with the card), --ifx-hole (hole radius), --ifx-pitch (spacing between holes) and --ifx-film (band color — a warm orange gives a color-negative look). It's a static CSS mask: identical on touch and needs no reduced-motion handling.

Use cases

  • editorial
  • portfolio
  • gallery
  • personal

Browser support

Modern — CSS masks.

Accessibility

  • Essential content is never hidden behind hover.
  • No motion — nothing to reduce.
  • Touch fallback: identical on touch.
  • Keyboard accessible — the effect also triggers on focus-within.