By using grayscale property of css3 we can change the color of image to black and white (100% gray).
Grayscale property apply a shade of grey on our images. The value can be either decimal or percentage. 100% or 1.0 will make the image full greyscaled, 0% or 0 will add no effect to the image.
This effect can be applied by using few lines of code which are written below-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Change color image to black and white image on hover using CSS</title>
<style type="text/css">
.block img {
height: 250px;
width: 250px;
border: 1px solid #000;
cursor: pointer;
-moz-transition: all 2s ease; /* Firefox */
-webkit-transition: all 2s ease; /* Safari and Chrome */
-ms-transition: all 2s ease; /* IE 9 */
-o-transition: all 2s ease; /* Opera */
transition: all 2s ease;
}
.block:hover img {
-moz-filter: grayscale(100%); /* Firefox */
-webkit-filter: grayscale(100%); /* Safari and Chrome */
-ms-filter: grayscale(100%); /* IE 9 */
-o-filter: grayscale(100%); /* Opera */
filter: grayscale(100%);
}
</style>
</head>
<body>
<form id="form1">
<div class="block">
<img src="Images/guitar.jpg" alt="Change color image to black and white image on hover using CSS">
</div>
</form>
</body>
</html>
The result will be shown as below-
Grayscale property apply a shade of grey on our images. The value can be either decimal or percentage. 100% or 1.0 will make the image full greyscaled, 0% or 0 will add no effect to the image.
This effect can be applied by using few lines of code which are written below-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Change color image to black and white image on hover using CSS</title>
<style type="text/css">
.block img {
height: 250px;
width: 250px;
border: 1px solid #000;
cursor: pointer;
-moz-transition: all 2s ease; /* Firefox */
-webkit-transition: all 2s ease; /* Safari and Chrome */
-ms-transition: all 2s ease; /* IE 9 */
-o-transition: all 2s ease; /* Opera */
transition: all 2s ease;
}
.block:hover img {
-moz-filter: grayscale(100%); /* Firefox */
-webkit-filter: grayscale(100%); /* Safari and Chrome */
-ms-filter: grayscale(100%); /* IE 9 */
-o-filter: grayscale(100%); /* Opera */
filter: grayscale(100%);
}
</style>
</head>
<body>
<form id="form1">
<div class="block">
<img src="Images/guitar.jpg" alt="Change color image to black and white image on hover using CSS">
</div>
</form>
</body>
</html>
The result will be shown as below-
0 comments:
Post a Comment