CSS Transitions and Interactions

This video tutorial explains how to add interactions to webpages using CSS. It covers the use of hover and active pseudo-classes to change styles in response to user actions like hovering or clicking. The tutorial demonstrates how to create smooth transitions for these interactions by using the transition property in CSS. A practical example is shown in a web editor, illustrating how to apply these concepts to an image element, making it grow and change brightness on hover or click.

What is the primary benefit of using CSS interactions on a webpage?

• To improve the website's SEO

• To reduce the amount of CSS code needed

• To engage users and allow them to interact with the website

• To make the webpage load faster

Which CSS pseudo-class is used to create hover interactions?

• :hover

• :click

• :focus

• :active

What happens to an image when the hover pseudo-class is applied and the user hovers over it?

• The image rotates

• The image disappears

• The image changes color

• The image grows in size

Which CSS property is used to make transitions smooth?

• filter

• transform

• transition

• animation

How do you specify the duration of a transition in CSS?

• Using the 'time' property

• Using the 'speed' property

• Using the 'transition' property followed by the duration

• Using the 'duration' property

What is the correct way to apply multiple transitions in CSS?

• Separate them with a semicolon

• Use the 'animation' property

• Use multiple 'transition' properties

• Separate them with a comma

Where should the transition property be added to ensure smooth transitions for all images?

• To the image selector

• To the image container selector

• To the body selector

• To the image hover selector

Which pseudo-class is used to create click-based interactions?

• :hover

• :click

• :active

• :focus

What happens to an image when the active pseudo-class is applied and the user clicks on it?

• The image shrinks

• The image grows in size

• The image rotates

• The image changes color

What is the effect of adding a filter of brightness 120% to an image on hover?

• The image becomes transparent

• The image becomes brighter

• The image rotates

• The image becomes darker