Generador de Efectos CSS

← Volver a la lista

Escala de Grises con Hover

Categoría: Filtros CSS

Imagen en escala de grises que recupera color al pasar el ratón

Usa la propiedad filter: grayscale() para convertir la imagen a escala de grises y la transición para suavizar el cambio.

CSS

HTML

.imagen-filtro {
    filter: grayscale(100%);
    transition: all 0.5s ease;
}
.imagen-filtro:hover {
    filter: grayscale(0%);
}

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

Descargar HTML Descargar CSS