Well, this is my very first post on my own, personal blog. I hope you’ll like it. While setting up this blog, I was trying to make my profile look more attractive by playing some tricks with the CSS and see this is what I have got for you.

One of the very common ways used on web pages to add interactivity to a page involves rendering an image, in greyscale and switching back in a colour version or greyscale to colour version when the mouse is rolled over.

Here’s a useful bit of code for changing pictures to Grayscale-to-Colour . This will also be helpful when you to add a colour-to-grayscale hover effect to your pictures.

Simply Follow this Steps.

Step 1 : The very first step comprises of choosing your image for Grayscale Effect and add this below code to wherever you want to have the effect in your HTML page.

<div class="image-hover img-color-grayscale">
                    <img src="YOUR IMAGE.jpg">
                </div>

Step 2: The next thing is to paste this simple CSS Code to your Style.css or just use internal style-sheet  in your html document in which you can embed this below code with help of <style></style>tag.

.img-color-grayscale:hover {
 filter: none; 
 -webkit-filter: grayscale(0%);
 -webkit-transition: all 2s ease-in-out;
 -moz-filter: grayscale(0%);
 -moz-transition: all 2s ease-in-out;
 -o-filter: grayscale(0%);
 -o-transition: all 2s ease-in-out;
} 
 .img-color-grayscale {
 filter:url(https://mosam.me/wp-content/uploads/2013/12/greyscale.svg#greyscale); /* SVG Layer For Mozilla FireFox */
  filter:gray;
  -webkit-filter: grayscale(100%);
  -webkit-transition: all 2s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: all 2s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: all 2s ease-in-out;
}

Well, you might be having a logical and simple question that this is all about converting Gray-scale to Color but what if we want to do vice-versa? Well, I have got a solution for that too.

Here is that :-

The below code has got just a little bit of modifcation to feel this change. In the below code, change that grayscale(0%) from 0% to 100%.

.img-color-grayscale:hover {
 filter: none; 
 -webkit-filter: grayscale(100%);

And convert the “img-color-grayscale” section’s grayscale to 0% from 100%.

.img-color-grayscale {
 filter:url(https://mosam.me/wp-content/uploads/2013/12/greyscale.svg#greyscale); /* SVG Layer For Mozilla FireFox */
 filter:gray;
 -webkit-filter: grayscale(0%);

This is how it will look like.

Conclusion :-

So what do you think? Would you use this technique in your own projects? Can you bring to mind a better method? Let me Know in the Comments!
  • Charmie

    Hello Mosam,
    I know its a bit awkward to give my comments that too for the first time on your blog but its indeed a great pleasure to do this…!!!
    You know me very well that I am very much confused in this HTML and CSS world but thanks to you for bringing up such a nice article in here that too in such an effective manner.
    Thanks a lot for this.
    Keep sharing such articles. Want to see you dropping more like this.
    Congratulations for this new site and Best Luck..!!
    Regards
    Charmie

    • Mosam Gor

      Hello Charmie,

      Thanks For your valuable feedback for my first article 🙂

      Stay Coming and Stay Rocking 😉

      -Mosam

  • Shivani

    Hey bud!

    First of all, you’ve designed a really good website. I couldn’t help but drool over it. lol.
    Congratulations on the beginning of a new step in your life. 🙂 The article is really gonna help me in my programming expedition.

    Stay happy and healthy.

    Regards,
    Shivani.

    • Mosam Gor

      Hello Shivani,

      Glad to See you here shivani. thanks for sharing your thoughts and stopping by here 🙂

      stay updated and stay rocking 😉

      -Mosam

  • Ishan Patel

    This would be the blog, which I would love to read all time. I thought many times a year to start such public blog. But I have made a secret blog like this where i save my code for my reference. Thanks for revealing your stuffs 😀

    • Mosam Gor

      Hello Ishan,

      My Pleasure Ishan, and thanks for Stopping by and sharing your thoughts 🙂

      Yes, you are right hear i’m store my personal codes you know my Hard-Drive condition 😉 😀

      -Mosam

      • Akash

        Did it wok on Genesis Framework..??? Is the same method..???

  • Nandip Makwana

    Good one man keep it up… bye the way let me add one suggestion here : you should also include standard CSS3 transition attribute also i.e. “transition” – along with browser specific attribute

    • Mosam Gor

      Hello Nandip Bro,

      Glad to see you here, and Thank you very much for your very valuable comment.!

      Thanks …I will bear your advice in my mind and keep working and improving my skills.!

      Thanks for stopping by here 🙂

      Stay tuned and Stay Coming 😉 🙂

      -Mosam

  • Vivek Sonchhatra

    A valuable post for CSS and HTML lovers to play with the effect.
    Wish you a Great and Successful Carrier ahead 🙂

    • Mosam Gor

      Hello vivek,

      Thanks for your compliment vivek 🙂

      Stay updated and Stay Rocking 😉 😛

      -Mosam

  • Jitendra Vaswani

    Awesome Mosam. I appreciate ur work

    • Mosam Gor

      Hello Jitendra,

      Thanks for your valuable Compliment for my work 🙂

      stay healthy and stay tuned 😉

      -Mosam

  • Sriram

    Hi Mosam,
    This is a great trick indeed! I didn’t aware of this one. Your new theme is great. All the best for your new blog 🙂

    • Mosam Gor

      Hi Sriram,

      Thanks for your Kinda words 🙂

      stay tuned 😉

      -Mosam

  • Suresh Khanal

    Nice codes!
    It may be little work but makes web page more interesting by adding interactivity. I’d seen a few blogs with this effect earlier and glad to get the code here.
    Good work! Keept it up!

    PS: Don’t you think the post width of your blog is bit larger to the comfort of reading eyes? Are you adding right sidebar soon?

    • Mosam Gor

      Hello Suresh Sir,

      Thanks for your very valuable feedback for my article.! yes, you are right using this effect we can make stunning webpages.!

      stay tuned and stay healthy sir 🙂

      -Mosam

  • Gautam

    First i would like to say you have using a unique design. I really like it. Thanks for the step by step tutorial. Its a nice post.

    • Mosam Gor

      Hello Gautam,

      Thanks for your Compliment for my blog design 🙂 Glad you like it.!

      Stay coming and Stay healthy 😉

      -Mosam

  • Siddharth Sharma

    Hmmmm..
    Bro. Thanks to Share this .!

    Very Nice And Helpful post i got Here.
    I’M Glad to see you here on this Intresting Article.

    • Mosam Gor

      Hello Siddharth,

      Thanks For Stopping by and sharing your thoughts 🙂 Glad you like it.!

      stay updated and Stay Rocking 😉

      -Mosam

  • Nwosu Desmond

    Awesome tutorial and i agree it could improve interactivity on a site. But my only worry is what effect would this have on my site speed as i am mostly concerned about my page speed and will not want to add load to it so it can be fast enough for my audience to enjoy surfing around my site.

    • Mosam Gor

      Hello Nwosu,

      Thanks for your valuable Comment.! i want to tell you this effect we can implement in our website by using CSS3 not jquery so Don’t Worry about page load feel free and use this code this code not effect on your page speed 🙂

      Btw.! Thanks for sharing your doubts 🙂

      Stay tuned and stay rocking 😉

      -Mosam

  • marilyn cada

    hello mosam… at first i thought you are referring to CS3 as photoshop or illustrators. now i see that you mean is CSS3. the truth is i am still confused with CSS3 but i am in the process of learning it..

    thanks for sharing these insightful post

    • Mosam Gor

      Hello Marliyn,

      Thanks for you Comment.! this is a CSS3 version 3.0 of cascading style sheets. with help of css we can design our html layouts and make stunning Ui for our website. if any problem with css and html feel free and let me know i will surely help you to solve your problem.!

      btw.! thanks for sharing your thoughts 🙂

      stay tuned and keep learning 😉

      -Mosam

  • Arun Kallarackal

    Hi Mosam,

    I’m not an expert in coding. The effects which you showed are good ways to impress visitors and add a bit of spice to our blogs. Unfortunately, without knowing the sufficient coding know-how, I’ve to compromise on such stuff.

    The way you explained how to get it done is real simple. I mean, now I can get it done easily. Just want to thank you for sharing it with us all 🙂 Hope you’ll come up with more such stuff.

    Hope you have a happy day ahead friend!

    Arun

  • Kushal Jain

    Alright! I just stumbled upon your article. I always wanted and was in love this functionality and this just made my blog a little more dynamic. However, I found that my Pagespeed service just reported a glitch in speed. I didn’t do a major change to my blog after uploading that image and updating with the piece of code that you provided. I’m not a coder as of now but can you just let me know how to make the speed factor neutral? I tried EWWW but it just failed.

    • Mosam

      Hello Kushal,

      This might be the internal server’s problem because I have tried this EWWW plugin and found it absolutely okay. One more thing is that I checked your website and it is hosted on ipage. And it is seen that this hosting service provider causes this error many times. I have used ipage and so I can say this can be the possible reason.

      I would prefer you to use Bluehost or Hostgator. btw.! Thanks for sharing your doubts 🙂

      stay tuned Stay Rocking 😉

      -Mosam

  • rashmi thakar

    hi mosam… you are doing a great job bro.. 🙂 😉

  • Nate Leung

    This is great. I’ve seen stuff like this on other people’s blogs and thought they are pretty cool. Thanks for sharing the codes!

  • weight loss Diet pills

    I am really impressed together with your writing abilities as neatly as with the structure for your
    blog. Is this a paid topic or did you modify it your self?

    Either way stay up the excellent quality writing, it’s rare to look a great weblog like this one these days..