Animated Greyscale to Color Image Reveal Effect

Ana Tudor recently shared a trick on how to make an image partially greyscale:

Here’s her code in a CodePen demo for you to play with:

See the Pen CSS Partial Greyscale by Bramus (@bramus) on CodePen.

☝️ Tip: Tweak the angle and the percentage of transparent to see how it behaves.

~

Inspired by a CodePen demo by Jhey — in which he built image reveal on hover using filter and clip-path — Ana rebuilt his demo using her technique:

One advantage of Ana’s technique is that it doesn’t require duplicated images in the markup. A disadvantage though is that it only works with background images. Chrome only too, as it relies on @property.

I like this form of code golfing 🙂

UPDATE 2021-02-02: Ana also made a non-Houdini version that uses box-shadow on a wrapping element. Because of that you can simply leave your img tags intact, so all cons of her first iteration have been nullified. Cool!