 Resources from Hiro Nishimura in 2021

Cascading Style Sheets bring order and beauty to our applications.

Learn how to change the "opacity" property of an element to create a "hover-over" effect with CSS using the `:hover` selector. The "opacity" property specifies the transparency level for an element (in this case, an image and paragraph text). 

By changing the opacity, you can change how "faded" an image looks. By utilizing the `:hover` selector, you can set the opacity of an element to change on mouse-over to create a "fade in" or "fade out" effect.

Use :hover CSS Pseudo-Class with Opacity Property to Create "Fade-in"/"fade-Out" Effect

Sometimes, you want an effect to have a delay before beginning its transition. To accomplish this, you can apply the "transition-delay" property in CSS to specify when a transition effect will start for an element. In this lesson, we utilize the "transition-delay" property to delay start of the transition effect on an element at mouse-over with the ":hover" psuedo-class.

The value is defined in seconds (s) or milliseconds (ms). So if you wanted a transition effect to start after 2 seconds, you would use "2s." For 5000 milliseconds (or 5 seconds), you would use "5000ms."

Use transition-delay CSS property to specify when an effect will start on mouse-over

You can use the "border-radius" CSS property to add rounded corners to an element's outer border edge by defining the radius of the element's corners. You can use pixels or percentage to set the border-radius.

How do you want to style these borders? You've got options! You can set the radius of all four corners together, or each corner or pairs of corners separately. In this lesson, we will start with an image with one border radius, and explore how changing the percentage of the border-radius impacts how "rounded" the border corners become. 

We will also use the ":hover" psuedo-class to change border-radius on mouse-over.

Topics

Instructors

Content Type

Free or Pro

Hiroko Nishimura

Build Modern Layouts with CSS Grid

Use :hover CSS Pseudo-Class with Opacity Property to Create "Fade-in"/"fade-Out" Effect

Use transition-delay CSS property to specify when an effect will start on mouse-over

Use the "border-radius" CSS property to add rounded corners to elements