Streaming live at 10am (PST)

Transition between images flashing on start

Hi i am trying to create a smooth transition between 2 images, one has color and the other one is in black and white but basically they are the same image.

I achieved that by putting both images as a divblock background, one is in the normal state and the other one is on the hover state. As transition duration I used 400 ms and I set it to “all”.

The trick works but the image flashes sometimes when I hover on the image with the mouse. Perhaps because is taking a bit to load the image?

I tried to put an image on top of an other and making one of them disappearing but when they are on top of each other you can see a red outline around the text.

Can this be solved in another way? and why is the image flashing sometime.

Please let me know if you guys have a solution.

Cheers!

The image I’m talking about is this.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Why are you using two images if they are the same? why don’t you apply a color filter that add/removes color on hover onto one image, and this should get rid of the flicker…?

Look at the website the color has a gradient and the image is a png I don’t think I can apply a couple of filters that will give me the same result. or maybe I’m wrong