Cerrar video

Cómo diseñar unas cards o tarjetas con un efecto hover de desenfoque y transformación en divi sin plugins

por | Jun 14, 2022 | Tutorial gratuito | 2 Comentarios

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.

Cómo diseñar unas cards o tarjetas con un efecto hover de desenfoque y transformación en divi sin plugins

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:


Descargar JSON

Tutoriales Relacionados

2 Comentarios

  1. Tony

    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

    Responder
    • Oscar Viedma

      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.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest