Teoría
Teoría

Transiciones y filtros CSS

Ahora veamos cómo aplicar transiciones a los filtros.

Por ejemplo, podemos usar filtros para que una fotografía se vea en blanco y negro y desenfocada, quitar los filtros al pasar el cursor sobre ella y hacer que el cambio visual sea gradual.

Por cierto, el valor predeterminado de la propiedad filter es none. Lo usaremos para quitar el efecto de los filtros al pasar el cursor sobre la fotografía.

La propiedad transition-duration indica cuánto dura el cambio.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Transiciones y filtros CSS</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="compare"> <div class="compare-single combo"> <img src="img/spb-6-full.jpg" alt=""> </div> </div> </body> </html>

CSS

.combo img { } .combo img:hover { }

ObjetivosRealizado

Aplica a la imagen del bloque .combo el filtro grayscale(1).
Agrega el filtro blur(2px) en la misma declaración.
Asigna al filtro el valor none cuando el cursor esté sobre la imagen.
Luego agrega a la imagen la propiedad transition-duration con el valor 0.6s.