ImagesLesson 72Free preview

Black and White Image

This lesson is part of How To · All levels

Summary

Black and white images are created with grayscale filters, so the photos appear colorless. This effect is often used to give a classical impression or highlight compositions. The original color can be returned while hovered to create an interesting interaction.

Key points

Filter: grayscale(100%) makes the image completely black and white.
Filter: grayscale(0) or filter: none returns the color.
The transition on the filter results in a subtle change in color.
The filter just changes the look, not the original image file.
Prefixes -webkit-filters are still used for older browser compatibility.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.