CSS grayscale filter overlay

  •   278
  •   Share
  •   Copy Article URL

Using CSS to create a grayscale filter is a great way to add visual appeal. The below snippet will make image load black and white, and become colored if hovered. For more info, read the W3 school CSS filter Property article.

img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); } <img src="https://i.von.enterprises/usa-support-nay-outsource.png" alt="" />