Convert an image to grayscale in HTML/CSS | Web design journal from Web designer Jithesh

Menu

Convert an image to grayscale in HTML/CSS

By Jithesh P R - - No Comments

Convert an image to grayscale in HTML/CSS

Paste below code in to your css file,

    
        img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

Share This:

Post Tags:

css grayscale webdesign

Jithesh P R

I'm Jithesh P R creative Graphic and web designer. I have a passion for designing creative Graphics and modern Websites, Specialized in creating W3C standard websites And WordPress based CMS Websites..

No Comment to " Convert an image to grayscale in HTML/CSS "

Subscribe to: Post Comments ( Atom )

To add an Emoticons Show Icons

To add code Use [pre]code here[/pre]
To add an Image Use [img]IMAGE-URL-HERE[/img]
To add Youtube video just paste a video link like http://www.youtube.com/watch?v=0x_gnfpL3RM