Changement d'image progressif au passage de la souris

Bonjour à tous,

Je cherche à faire une changement d'image progressif en fonction de l'avancée de la souris sur l'image comme l'a fait ce site https://www.skipass.com/news/110587-avant-aprs-volume-ii.html

A l'heure actuelle, j'arrive à faire une changement d'image dès que l'on passe la souris avec ce code HTML

<center><style>#image1 { background:url('http://skipass.fr/p/news/109488/185556.jpg');width:1281px;height:330px; } #image1:hover {background:url('http://skipass.fr/p/news/109488/185555.jpg'); }</style> <div id="image1"></div></center>

Que dois-je faire pour le rendre progressif au passage de la souris comme dans l'exemple?

Merci d'avance de vos réponses