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;


Yup that’s all! CSS Rocks!

Leave a reply

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!

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

    How do you rate our support?
      Hey you!
      Want to receive our latest freebies and articles straight to your email?
      We never spam Sparky. We hate it as much as you do!