<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%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.