Mostrar otra imagen al pasar por encima

Hace poco me empeñe en hacer este efecto al pasar encima de una imagen con el ratón o al tocar la imagen en versión móvil se mostrar una imagen diferente, esto es útil en algunos casos y en otros simplemente se hace por estética, el echo es que busque mucha información al respecto pero no di con algo 100% bueno.

Para hacer que se muestre otra imagen al pasar por encima con el ratón lo hice mediante estilos CSS sin Java ni nada mas que un pequeño añadido a nuestra hoja de estilos CSS. El problema principal que he tenido es que la imagen que se muestra al pasar el ratón no cuadra con el tamaño de la imagen principal. Las dos imágenes eran del mismo tamaño exacto pero aun así al pasar el ratón por encima se veía muy descompensado, fatal..

Estilos para mostrar una imagen diferente al pasar por encima

El planteamiento es sencillo se le da una imagen de fondo con el background y se le aplica un hover para que la oculte y solo la muestre al pasar el ratón por encima.

Después se le da el ancho, alto, pading y margin para adaptar la imagen de fondo a la principal. En mi caso las tuve que adaptar a ojo con el inspeccionar por que poniendo el mismo tamaño no funciono.

mostrar imagen diferente al pasar el raton encima
Estilos utilizados para mostrar imagen diferente

Ademas de pasar el rato pixel arriba y pixel abajo para adaptar la imagen de fondo a la imagen principal, también tuve que hacer unas medidas distintas para la versión móvil. Lo hice utilizando el @media screen limitando tamaño máximo con las medidas de móvil.

mostrar otra imagen al pasar por encima css
Estilos mostrar otra imagen al pasar por encima Móvil

HTML mostrar una imagen distinta al pasar por encima

Ademas de los estilos también que poner clase a todos los contenedores de las imágenes principal para que con cada clase se le añade una imagen de fondo diferente a no ser que se quiera mostrar siempre la misma imagen de fondo al pasar por encima con el ratón, entonces con la misma clase para todos valdrá.

Las medidas de las imágenes principales que utilice todas fueron de 600px de ancho por 800px de alto y las medidas que utilice para imagen de fondo en escritorio fueron 250px de alto por 250px de ancho. Se puede ver como no tiene nada de igual el tamaño de una y de otra sin embargo si visitamos la web al pasar por encima queda bien cuadrado.

En el caso de la versión móvil las imágenes principales fueron del mismo tamaño pero las secundarias fueron de 125px de alto por 125px de ancho un 50% mas pequeñas que la versión de escritorio.

No encontré la forma de que la imagen de fondo se adaptara al tamaño de la principal ni poniendo el mismo tamaño exacto, ni utilizando % en ves de px no pude hacerlo de forma mas dinámica y fácil.

La pagina que hice con el efecto de cambiar de imagen en CSS es esta https://www.simracingirona.com/pilotos-vrg/

Finalmente el resultado al pasar el ratón por encima es bueno pese a que no hay animacion y se produce de golpe el resultado es bueno para la finalidad que tenia yo en esa pagina.