Haz resaltar tu contenido con tarjetas animadas en Elementor
Elementor te permite incorporar interactividad a tus diseños web de manera fácil usando código. Una opción sobresaliente son las tarjetas animadas.
¿Qué son las tarjetas animadas?
Son elementos rectangulares que pueden contener texto, imágenes u otros widgets. Cuentan con efectos al pasar el mouse encima que mejoran la experiencia del usuario
Si quieres saber como implmentar estas tarjetas animadas, debajo te dejo un video donde explico paso a paso y también te dejo el código que use para animar las tarjetas en elementor
Css personalizado para escalar y mover la imagen
/*Posición de la imagen CSS*/
selector .elementor-widget-image{
position: absolute;
bottom: 0;
left: 0%;
}
selector .elementor-widget-image, selector .elementor-widget-image img{
transition: 0.5s ease-in-out;
}
/*Mover imagen al pasar el cursor*/
selector:hover .elementor-widget-image{
left: 40%;
}
/*Tamaño de imagen al pasar el cursor*/
selector:hover .elementor-widget-image img{
width: 330px;
}
Css personalizado para esconder y mostrar contenido
/*Esconder contenido inicial*/
selector .escoder{
opacity: 0;
transition: 1s ease-in-out;
}
/*Mostrar contenido al pasar el cursor*/
selector:hover .escoder{
opacity: 1;
}
Css personalizado para Tablet
/*Tablet CSS*/
@media (max-width: 1024px){
selector:hover .elementor-widget-image img{
width: 200px;
}
}
Css personalizado para dispositivos Móviles
/*Dispositivos móviles CSS*/
@media (max-width: 767px){
selector .escoder{
opacity: 1;
}
selector .elementor-widget-image{
position: unset;
}
/*Adjust Mobile Image Width from Here*/
selector .elementor-widget-image img{
width: 200px !important;
}
}
