I am trying to create a hover effect on a card I have made.
I want a div with a picture inside of it and then show a different image when hovering over the card.
I have kind of succeeded as I have put the two images into the DIV and added an interaction to put the first picture’s opacity at 0 on hover and increase the second image’s opacity to 100.
The interaction seems to work fine but I am having an issue where the first time I hover over the card, the animation is instant instead of fading in. If I hover in a second time, the interaction works fine.
You have to help the browser understand that there’s a chnage from a state to another, when this happens.
For instance, force it to understand that the colored image is opacity zero before turning into opacity 100.
Duplicate the step where the color image is set to 100%. Set it to 0% and pass it to Initial State.
Now the browser clearly knows from where to where to go, and it runs smoothly.
Additionally:
You don’t need to pass the greyscale image from 100 to 0. Just fade the colored one to 100 on top if the greyscale one. It will simplify the interaction and also remove this weird fade in/out of the greyscale parts of the image (a subtle flashing) unless this is what you want.
This seemed to solve my problem. Thank you so much!
I can see that one of my images (3rd column) changes it position a little bit when I hover over it. I have used the same classes for all the images so I am not sure why exactly this happens.
