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!

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.