How to do a simple image color transition effect with Tailwind CSS

ezgif-4-d6d9c5c30617.gif

I was messing around with the landing page of my site and thought it might be cool to add a little, completely unnecessary, transition effect.

What I wanted to do was to have the color photo transition towards the darker schema when hovered on. To create kind of a dusk effect.

There might a better way to do this, but what I ended up doing was add the two different images (b/w, color) to the page on top of each other and then do an animated opacity change on the top (color).

Here's what it looks like in code.

<div className="relative">
  <img src="https://.../....png"
            alt="Photo of the desert black and white"
            width={500}
            height={500}
  />
  <img className="absolute top-0 left-0 transition hover:opacity-25 transition-opacity duration-1000 ease-out"
            src="https://.../....png"
            alt="Photo of the desert color"
            width={500}
            height={500}
  />
</div>

The nice thing about this approach is that you can have a transition pretty much anything to anything as you are essentially fading the top layer to reveal some of the lower.

Happy hacking!

Comments (2)

Chris Bongers's photo

Just be aware you are loading twice the same image, not the best for load times and semantics I would imagine?

Nevertheless, cool and simple effect!

Tommi Urtti's photo

That's true, it should have downsides related to that and would be something to consider especially if it's otherwise a heavy site.

My site is so sparse and static that it loads superfast, give it a go: urtti.com

Might be possible to do something like this with a filter transition I suppose as well, that would avoid the double image.