ImagesLesson 71Free preview
Image Effects
This lesson is part of How To · All levels
Summary
Image effects leverage the CSS filter property to change the image's appearance without editing the original file. Effects such as grayscale, sepia, brightness, contrast, and blur can be applied directly in the browser. The combination of several filters and transitions makes the gallery feel more alive.
Key points
- The filters apply visual effects like grayscale, sepia, and blur.
- Some filter functions are written in sequence and separated by spaces.
- Transition: the filter makes an effect change when the hover feels smooth.
- Filter: none returns the image to its original display.
- The brightness value above 1 makes the image brighter.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.