Transition on display none

Hi there,

I have this simple display:none display:block which shows and hides an image on hover:

This works fine, but I would like to add a smooth transition between the two states. Is this possible?

I’ve added a simple transition: all 0.3s ease, but it doesn’t seem to apply.

Any ideas how I can do this?


You can’t animate display. Here is a list of properties that can be animated.

Ah, I see.

I have tried it with opacity and absolute positioning, but now have a weird issue with the second image jumping when I hover out.

Here’s my approach to this (with slower transition for demonstration):


That’s awesome :slight_smile: thanks!

I guess there is not a way to not have a fixed width, so if I had various image widths? If my images varied in width/height, I would have to set widths on each transaction and apply a different class to each image?

With images it is typically best practice to set the image dimensions in the width and height attributes of the image itself.