Efecto Scroll hover

~ Aprende hacer ~

Efecto Scroll para mostrar de una manera diferente nuestro portafolio, hechas con Elementor en su versión Pro, pero es posible hacerlo con la versión Free. Tiene un gran diseño que podrás utilizar como inspiración para tu próximo sitio web.

Tecnologías utilizadas:

Esta practica se realizo con el constructor de Elementor, haciendo uso del flexbox que esta herramienta proporciona. Agregando código CSS desde las opciones de Elementor Pro, pero esta practica puede hacerse sin problema con su versión gratuita y agregando el código CSS con ayuda de algún otro complemento como lo es Simple Custom CSS and JS.

Empezamos agregando un contenedor con dos secciones o las que requieras para tu proyecto, a esto le damos una altura de 70VH
Procedemos a agregar una nueva sección dentro de alguna de nuestras columnas, a esta nueva sección/contenedor le daremos una altura de 50VH
Nos dirigimos a estilos del contenedor para agregar la imagen a la cual le aplicaremos el efecto scroll.
En estilos -> fondo -> imagen, es donde agregaremos la screenshot de nuestro proyecto que previamente deberíamos tener, si no sabes como obtener una captura de pantalla completa en el que se vea todo tu sitio web, puedes ir al siguiente enlace como hacer una full screenshot, una ves cargada tu imagen e insertada.
Procedemos a darle los siguientes estilos posición: arriba centro, tamaño: abarcar. Borde este a gusto pero en esta practica le agregamos un borde de 3%.

Mira el Ejemplo en vivo dando clic en el siguiente botón

Es hora de agregar el código CSS que nos dará el efecto que deseamos, esto lo podemos hacer desde custom CSS de nuestro elementor pro o usando algun plugin para insertar código CSS, como lo puede ser Simple Custom CSS and JS

/*Seleccion interior/Avanzado/custom CSS*/ selector{ -webkit-transition: ease-in-out 4s !important; transition: ease-in-out 4s !important; } selector:hover{ background-position: center bottom !important; }

con esto ya tenemos nuestro efecto scroll al hacer hover en nuestras imágenes

No te quedes con dudas, mira un video sobre como realizar este ejemplo desde cero o modificarlo.
Descubre muchos más en mi canal de youtube.

¿Tienes algún proyecto? Llamame

~ Aprende hacer ~