When you hover over a link, the image changes with a delay. How to fix?

Question

PHP

I made a button that will occupy a permanent place on the screen. When you hover over it, I want to change the color. The first thing that came to mind was to simply add another picture to the hover. But the browser does not immediately load it, but only when hovered over. Because of this, a delay of several seconds , which is very ugly - the old picture disappeared, but the new one did not appear .
How to fix?

PS problem on skfu.org

Answer 1

Combine the picture into one, inactive on the left, active on the right (or top / bottom).
You have a .banner-left class there, write different background-positions for the normal state and for hover in it. For normal state left, for hover - right.

Answer 2

You can use a sprite or use css filters , in case the picture is the same and the color scheme changes