Cards Shape Hover

~ Aprende hacer ~

Ejemplo de Card, 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 al cual le daremos una altura mínima de 100VH, a este contenedor le agregamos un color de fondo y le agregamos un padding de 50px ala derechera e izquierda.
Agregamos otro contenedor dentro del primero, a este contenedor le daremos un acho de 1200px. Este será el contenedor que contendrá nuestras cards. Este contenedor debe tener una dirección de fila horizontal.
Insertamos nuestro primer contenedor para nuestra card, con una altura mínima de 420px y un padding de 15px ala derechera e izquierda.

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

Insertamos un elemento de icono, al cual le daremos las siguientes propiedades, tamaño de 84px, un margin bottom de 5px y un padding de derecha, abajo e izquierda de 10px y un ancho de 140px, a este elemento le agregaremos la clase icon.
Agregamos un titulo al cual le modificaremos el margin bottom a -6px, Agregamos un párrafo. Solo resta agregarles una tipografía y tamaño de fuente a tu gusto para que se vea bien.
Duplicamos tantas veces como necesitemos para tener todas nuestras cards que queramos.
Es hora de agregar lo que le dará más vida a nuestra practica, agrega el código CSS que a continuación veras, puedes agregarlo en la sección CSS que da Elementor PRO o en tu plugin para agregar código CSS.

selector .card{ box-shadow: 0 10px 0px rgba(255,255,255,1), inset 0 -15px 0 rgba(255,255,255,0.25), 0 45px 0 rgba(0,0,0,0.25); } selector .card:before{ content:""; width: 100%; height: 120%; background: linear-gradient(90deg,transparent, rgba(255,255,255,0.2)); position: absolute; top: -140px; left: -35%; pointer-events: none; filter: blur(5px); transform: rotate(35deg); border-radius: 0px; } .card:hover .icon .elementor-icon i{ animation: up 1s forwards; } @keyframes up{ 100%{ transform: translateY(-30px);

}
}

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 ~