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)
No comments:
Post a Comment
*******Please Comment, Like and Share******
दोस्तों पूरी पोस्ट पढने के लिए धन्यवाद, आशा करता हूँ आप को यह पोस्ट पसंद आई होगी और भी अधिक जानकारी के लिए या मुझसे जुड़ने के लिए आप मुझे मेरे फेसबुक पेज information & technology computer institutions और इन्स्टाग्राम ID:- satyam_hardoi को फॉलो कर सकते है,
मेरा youtube चैनल itci computer hardoi सर्च करे और पाए कंप्यूटर से सम्बंधित सभी विडियो और हाँ प्लीज नई अपडेट पाने के लिए चैनल को सब्सक्राइब जरुर करें, धन्यवाद | आपका $ सत्यम सर् $