Aprenderemos a crear un scroll automático sobre una imagen al poner el cursor del ratón sobre ella.

Para realizar el siguiente tutorial ocuparemos el siguiente código:

/*-----DESPLAZAMIENTO IMAGEN SCROLL-----*/
.scrollme:hover {
 -webkit-transition: background-position 4s linear 0s;
 -moz-transition: background-position 4s linear 0s;
 transition: background-position 4s linear 0s;
 background-position: center bottom;
/*El valor 4s (segundos) es el tiempo que tarda la imagen
en desplazarse de principio a fin, por lo que las capturas
de pantalla más largas se desplazan más rápido*/
}

.scrollme {
 min-height: 300px;
 display: block;
 background-position: center top;
 background-repeat: no-repeat;
 background-size: 100% auto;
 position: relative;
 -webkit-transition: background-position 1.5s ease-out 0.5s;
 -moz-transition: background-position 1.5s ease-out 0.5s;
 transition: background-position 1.5s ease-out 0.5s;
/*The ease-out 0.5s es el tiempo que pasa hasta que vuelva
a desplazarse a su posición original*/
}

Aquí tienes el vídeo.