This tutorial will guide you on the process of generating a black and white rendition of an image.
When dealing with a colored image, the objective is to transform it into grayscale through the utilization of CSS attributes. The process of converting an image to grayscale primarily involves the application of the CSS filter property. This property is commonly employed to modify the visual representation of an image.
Syntax:
Example
filter: grayscale()
1 st Method:
To convert an image to grayscale, you can achieve this by applying a filter with the property grayscale set to 100%.
Example
<!DOCTYPE html>
<html>
<head>
<title>Abc...</title>
<style>
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
h1 {
color:red;
}
</style>
</head>
<body>
<center>
<h1>Example Site</h1>
<h2>Grayscale Image</h2>
<img src=
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"
width="300px" height="150px" alt="filter applied" />
</center>
</body>
</html>
Output:
2 nd Method:
Example
<!DOCTYPE html>
<html>
<head>
<title> Abc...</title>
<style>
img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
img:hover {
-webkit-filter: grayscale(0);
filter: none;
}
h1 {
color:red;
}
</style>
</head>
<body>
<center>
<h1>Example Site</h1>
<h2>Grayscale Image</h2>
<img src=
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"
width="300px" height="150px" alt="filter applied" />
</center>
</body>
</html>
Output: