How to convert images on hover from color to grayscale with CSS?

How to convert images on hover from color to grayscale with CSS?

Today we are going to learn how to transform images to grayscale / black and white, and on hover revert back to their original color, only with CSS. This is a very used effect by web designers across the globe as user can concentrate more on the viewed image, while the rest of the images are black and white, and don’t disturb his attention.

But how can I do it?

It’s pretty simple. Let’s assume you have a class named “gray_image” (you can name your class how you want) assigned to the images you want to convert to grayscale. Now all you have to do it’s write in your CSS file the following properties:

[css] .gray_image {
filter: url(“data:image/svg+xml;utf8,#grayscale”); /* Firefox 10+, Firefox on Android */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}

.gray_image:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
}

[/css]

Yup that’s all! CSS Rocks!

Leave a reply

0
Connecting
Please wait...
Send a message

Sorry, we aren't online at the moment. Leave a message.

Your name
* Email
* Describe your issue
Chat now

Need more help? Save time by starting your support request online.

Your name
* Email
* Describe your issue
We're online! Ask us anything!
Feedback

Help us help you better! Feel free to leave us any additional feedback.

How do you rate our support?