Learn different ways to manipulate elements (like images and text) on mouse-over by using the :hover pseudo-class in CSS. We will learn how to create the "fade-in" and "fade-out" effects on hover, how to change border effects on hover, how to change the "border-radius" to make rounded corners, and how to delay transitions on hover. 

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

You can set an element's border to change on mouse-over by using the ":hover" CSS pseudo-class. 

The ":hover" selector creates a "hover-over" effect for an element when you mouse-over it. We'll play around with different border effects like border-style, border-width, border-color, and opacity for images and text!

Use the :hover CSS pseudo-class to change border effects in multiple ways 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.

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

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

The CSS "filter" property adds visual effects to an element. Consequently, you can create the "blur" effect on an element by using the syntax, "filter: blur()" in CSS. The "blur" filter creates a gaussian blur on the element. 

By specifying a number of pixels for the screen to blend into each other, you can change the intensity of the blur. The larger the value in pixels, the more intense the blur.

Use the "filter" property in CSS to create blur effects on elements

In this lesson, you will set a background-image for a CSS class, and swap it out to another background-image on :hover to achieve the "change image on hover" effect.

The CSS background-image property allows you to set an image as a background of a DIV.

By creating a class with width, height, and the background-image set, you can insert a DIV in your HTML page set to that class, and utilizing the :hover pseudo-class, replace the image that shows up on mouse-over. 

CSS Tips and Tricks on :hover Effects

Instructor

Course Content