Generador de Efectos CSS

← Volver a la lista

Desenfoque con Hover

Categoría: Filtros CSS

Efecto de desenfoque que se elimina al pasar el ratón

Usa filter: blur() para aplicar desenfoque y lo elimina en hover.

CSS

HTML

.imagen-desenfoque {
    filter: blur(3px);
    transition: all 0.5s ease;
}
.imagen-desenfoque:hover {
    filter: blur(0);
}

<img src="https://source.unsplash.com/random/300x200" alt="Imagen de ejemplo" class="imagen-desenfoque" style="border-radius: 10px;">

Descargar HTML Descargar CSS