CSS Image Filters and Effects

This video tutorial introduces image manipulation using CSS filters, commonly used in apps like Instagram and Facebook. It explains the CSS filter property, which allows adding effects like grayscale, sepia, and blur to images on webpages. The tutorial demonstrates how to apply single and multiple filters, providing practical examples of using CSS to achieve various visual effects. Viewers are encouraged to explore the full range of CSS filters available for creative image manipulation.

Which of the following websites commonly use image filters to modify images?

• Pinterest and Tumblr

• Reddit and Quora

• Instagram and Facebook

• Twitter and LinkedIn

What does the CSS filter property allow you to do?

• Animate images

• Add image filters to images on webpages

• Change the position of images

• Change the size of images

Which filter value turns an image into black and white?

• Sepia

• Grayscale

• Brightness

• Blur

How can you apply multiple filters to an image in CSS?

• By using commas between filter names

• By using colons between filter names

• By using semicolons between filter names

• By using spaces between filter names

Which of the following is NOT a filter property value mentioned in the video?

• Grayscale

• Shadow

• Sepia

• Contrast

What class name is used in the example to apply filters to the second image?

• image-class

• filtered-image

• image-filter

• filter-class

What percentage value is used to fully grayscale an image?

• 150%

• 100%

• 80%

• 50%

How is the blur filter value specified in CSS?

• As a decimal

• As a number of pixels

• As a percentage

• As a degree

What effect does the hue-rotate filter have on an image?

• It changes the brightness

• It changes the contrast

• It inverts the colors

• It rotates the colors

Which filter value would you use to make an image appear blurry?

• Blur

• Invert

• Sepia

• Grayscale