Pure CSS image reveal

Inspired by a few lines of CSS from Adam Argyle, I forked his CodePen where he randomly added a color and a delay in HTML, to be then applied in CSS.

In my fork I only used the idea of the random delay, which I too apply to a transition. But while he made dots appear, I make squares (basically large pixels) disappear, to reveal what’s underneath. Check out my CodePen to see the effect.

And yes, maybe there’s even be a better way of doing this with masks or whatever. But I’d like to talk about something else.

Once the effect was finished, I did add visibility to the transition, because I want the “pixels” to be gone after they have disappeared visually. If I don’t do that, they obstruct the image and thus prevent right-clicking it. What’s weird is that this part doesn’t work in Firefox, which I wouldn’t have guessed by just skimming caniuse.com. Here’s what Firefox (version 137 at time of writing) supports:

1. ✅ transition-behavior: allow-discrete
2. ✅ @starting-style
3. ❌ transitioning display & (content-)visiblity

Would be helpful if testing for support would work, but alas.

@supports (transition-behavior: allow-discrete) {
	/* Even Firefox applies styles placed in here, but display
	   and (content-)visibility are not transitionable yet. */
}

In my CodePen I was able to simply declare both transitions. Without visibility: hidden being applied at the end, the overall effect still works, only right-clicking the image does not. In other words, in my particular case I didn’t need aforementioned @supports, but someone may run into a case where this isn’t possible. We can only hope that Firefox catches up soon.

Showcase

View “Pure CSS image reveal” on CodePen.