En este tutorial gratuito aprenderás a crear, diseñar unas cards o tarjetas con un efecto hover de desenfoque y transformación en divi sin plugins.
Este efecto puede ser genial para aplicarlo cómo categorías, proyectos, portafolio, servicios o cualquier otro contenido que quieras mostrar de forma elegante.
El efecto consiste en tener una fila con 4 columnas (pueden ser las que tu quieras), en cada una de las columnas vamos a insertar un módulo llamada a la acción, lo vamos a personalizar con los ajustes que vienen por defecto en el módulo para posteriormente duplicarlo y agregarlo a las columnas restantes.
Para finalizar agregaremos un filtro hover para que al pasar el cursor sobre cualquier tarjeta o card las demás tarjetas se desenfonquen 😍
La verdad que es un efecto sencillo pero realmente genial.
En el trancurso de este tutorial vamos a necesitar de un pequeño fragmento de código CSS que será para aplicar el efecto de desenfoque en las tarjetas:
.ov-card-grid:hover .ov-card-blur:not(:hover) {
filter: brightness(0.5) saturate(0.5) contrast(1.2) blur(2px);
transition: filter 200ms linear, transform 200ms linear;
}
En algún momento del tutorial te pediré que vengas a esta entrada, copies el fragmento CSS y lo pegues en los ajustes de la página > CSS Personalizado. Así qué, estate atento…
Por cierto si quieres descargar el json para importarlo a tu web aquí te dejo el enlace para que lo descargues:
Hola, me he descargado el json, pero no es compatible para importar en una página y tampoco es compatible para la biblioteca, lo que no se como usarlo.
Gracias
Hola Tony, que raro. El json fue exportado como página, por lo tanto, lo debes subir desde la opción portabilidad del divi builder en una página.
Hola Oscar, hay forma de poner las todas las cards con desenfoque en su estado predeterminado excepto la primera?. No se si comprendes lo que deseo. Gracias Oscar por tu ayuda.
Hola Andrés, es probable que sea posible. ¿Tienes tu ejercicio en línea? Para que lo inspeccione y vea como podemos hacerlo 😀