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.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.