<h2>Convert the image to grayscale:</h2>
<div class = color>
<img src="https://adaptabiz.com/wp-content/uploads/2020/09/google-cardboard-min.jpg" alt="VR" width="50%" height="30%">
</div>
<div class=black>
<img src="https://adaptabiz.com/wp-content/uploads/2020/09/google-cardboard-min.jpg" alt="VR" width="50%" height="30%">
</div>


<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>

.black{
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.