Bueno pues ya esta solucionado, al final creo que lo he hecho algo diferente al ejemplo que me mostrabais.
Al ser 2 imágenes diferentes, las he juntado en una misma imagen, una debajo de otro. Al pasar el ratón por encima el background se desplaza verticalmente (con background-position: -px -px; ), mostrando la parte de abajo de la imagen, dando la impresion de ser otra imagen diferente. De esta forma ya no hay esos segundos con el fondo en blanco, ya que la imagen esta cargada sin tener que pasar el ratón ^^
Muchas gracias por la ayuda, saludos.