Transition on display none

[toolman]

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?

Thanks

[Gandalf]

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

[toolman]

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.

[Archibald]

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

[toolman]

That’s awesome 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?

[SamA74]

@toolman

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.