Filter effect on images like:- Hue, Saturation, Drop-shadow, Grayscale, Brightness, Etc.
Note:- When you hover the mouse on any image then it will be affected.
Program:--
<html>
<head>
<title>Filter an image</title>
<style>
h1{
color:red;
}
h1{
animation:blinking 1.5s infinite;
font-size: 60px;
}
@keyframes blinking{
0%{ color: red; }
47%{ color: green; }
50%{color:blue;}
62%{ color: transparent; }
80%{ color:transparent; }
100%{ color:purple;}
}
}
img{display:inline-flex;}
#im1:hover {
-webkit-filter: grayscale(100%);
}
#im2:hover {
-webkit-filter: blur(4px);
}
#im3:hover {
-webkit-filter: brightness(120%);
}
#im4:hover {
-webkit-filter: contrast(50%);
}
#im5:hover {
-webkit-filter: drop-shadow(3px 8px 20px blue);
}
#im6:hover {
-webkit-filter: hue-rotate(130deg);
}
#im7:hover {
-webkit-filter: saturate(50%);
}
</style>
</head>
<body>
<center>
<h1>Welcome To ITCI</h1>
<h1>Filter effect on images</h1>
<img src=
"file:///C:/Users/Satyam/Downloads/192611621_2112695282215979_4754269793175258100_n.jpg"id="im1"width="300px" height="150px" alt="filter applied" /> <br>
<img src=
"file:///C:/Users/Satyam/Downloads/192611621_2112695282215979_4754269793175258100_n.jpg"id="im2"width="300px" height="150px" alt="filter applied" />
<img src=
"file:///C:/Users/Satyam/Downloads/192611621_2112695282215979_4754269793175258100_n.jpg"id="im3"width="300px" height="150px" alt="filter applied" />
<img src=
"file:///C:/Users/Satyam/Downloads/192611621_2112695282215979_4754269793175258100_n.jpg"id="im4"width="300px" height="150px" alt="filter applied" />
<img src=
"file:///C:/Users/Satyam/Downloads/192611621_2112695282215979_4754269793175258100_n.jpg"id="im5"width="300px" height="150px" alt="filter applied" />
<img src=
"file:///C:/Users/Satyam/Downloads/192611621_2112695282215979_4754269793175258100_n.jpg"id="im6"width="300px" height="150px" alt="filter applied" />
<img src=
"file:///C:/Users/Satyam/Downloads/192611621_2112695282215979_4754269793175258100_n.jpg"id="im7"width="300px" height="150px" alt="filter applied" />
</center>
</body>
</html>
.png)
