I have this simple
display:block which shows and hides an image on
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 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
height attributes of the image itself.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.