Scroll sobre una imagen al pasar el cursor en Divi

Scroll sobre una imagen al pasar el cursor en Divi

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.

Prueba 12 clases gratis

 

1. Cómo contratar un hosting, instalar WordPress y acceder a tu web

2. Cómo buscar y elegir un theme para tu web

3. Cómo crear menús personalizados

4 Cómo personalizar páginas en WordPress con Gutenberg

5. Cómo instalar Divi y cargar diseño web en un par de clics. 

6. Qué es el email marketing y porqué debes usarlo

7. Cómo funciona el editor visual de MailerLite para crear tus campañas de email marketing

8. Cómo crear una tienda online profesional con Flatsome

9. Cómo crear una página web para inmobiliarias

10. Estrategias linkbuilding para mejorar el SEO

11. Cómo crear metadescripciones para atraer más clics a nuestra web.

12. Cómo conseguir suscriptores y contactos

Muchas gracias por suscribirte. Tendrás noticias mías por correo en breveRevisa, por favor, tu bandeja de spam o correo no deseado si en unos minutos no has recibido mi email.¡Seguimos!​David