La escala de grises es un efecto que proporciona un efecto de transición de una imagen en color a una imagen monocromática o viceversa. Este efecto se puede aplicar a varios eventos como el desplazamiento del mouse o también puede usar un botón para activar el efecto.
Enfoque: Usaremos la función integrada de CSS grayscale() para crear este efecto.
Ejemplo 1: Primero, veamos la transición de una imagen en color a una imagen monocromática. Para esto, usaremos la función de escala de grises() en el selector de desplazamiento . Simplemente establecemos el valor de escala de grises al 100% al pasar el mouse.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Gray Scale Effect</title>
<style>
body{
background: grey;
}
img{
position: absolute;
top:40%;
left:50%;
transition:.5s ease-in-out;
}
img:hover{
filter:grayscale(100%);
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</body>
</html>
Producción:
Ejemplo 2: Ahora, para una transición de la imagen monocromática a la coloreada, haremos el proceso inverso del ejemplo 1. Usaremos la función grayscale() al 100 % para la etiqueta <img> y luego la reduciremos al 0 % con el mouse. -flotar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Gray Scale Effect</title>
<style>
body{
background: grey;
}
img{
position: absolute;
top:40%;
left:50%;
filter:grayscale(100%);
transition:.5s ease-in-out;
}
img:hover{
filter:grayscale(0%);
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA