Greyscale image with filter in CSS3
Free Webmasters
Posted on February 9, 2023
What is a greyscale image with filter in css3? How do you make a greyscale image with filter in css3?
Greyscale image with filter in CSS3 - HTML Code:
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Greyscale image with filter in CSS3</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="image"> <img src="http://dummyimage.com/600x400/F00000/ffffff.png" alt="" title="" />
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Greyscale image with filter in CSS3 - CSS Code:
img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: gray; /* IE 6-9 */ -webkit-transition: all .6s ease;
}
img:hover { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */
}
š Source & Preview: https://scriptcodes.co/greyscale-image-with-filter-in-css3-acbqc
š šŖ š
š©
Free Webmasters
Posted on February 9, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
