How to stop images from flashing as they change on hover

https://preview.webflow.com/preview/mcevoycraig?preview=4c849e1f8f2a93ddab263ba28cb2ca17

On the services section on the homepage, there are 6 services with blue boxes that turn orange on hover.
On a published site, when first loaded, a white box appears first over the image before the image switches from blue image to orange image.

The reason why I’m switching from one background image to another on hover is down to Multiply effect not working on IE11. I had the multiply effect working perfect, using custom code and gradients over the image, however I cannot get it working on IE and so opted for the Photoshop approach and then switch images on hover. This has now created this new issue!!
Any ideas how I get rid of this image flash?

Add the hover version of the images as a background under the bg of the normal state, that way the hovered version don’t wait for the bocx to be hovered to load and they’ll be loaded; ready to be shown, for when the box is hovered.

I spoke too soon! issue still occurring when you hard load the browser…
both images are loaded on normal state with blue turned on and orange turned off,
then on hover state they are switched off/on vice versa.
This is I assume what you are saying above? that doesn’t fix the issue.