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

Use the :hover CSS pseudo-class to change border effects in multiple ways on mouse-over

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

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

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

Use the CSS background-image Property to Change Image on mouse-over

CSS Tips and Tricks on :hover Effects

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!

Hiro Nishimura: [0:00] Let's create a new class in your CSS. I named mine effect. I already have an image in text such as effect class in my index.html. Right now, they're just plain image and text with no border, as you can see.

[0:14] Back in my CSS, I give the element a border and choose a color and width. I decided to give the element a solid blue border that is 10px wide. If we refresh the page, the image and text now have solid blue borders that are 10px wide.

[0:32] Now, let's set the hover pseudo-class and change up some attributes at mouseover. We'll keep the border-style: solid, but let's change the border-color: yellow. Let's also keep the border-width: 10px. When you refresh the page, you can see that when we mouseover the image and text, the border changes from blue to yellow.

[0:52] Let's try changing up the border even more at mouseover. You can change the border to become dotted at mouseover by coming back to the hover pseudo-element and changing the border style to dotted. We'll change the color to red while we're at it. Let's make the border thicker, 20px.

[1:09] To make this extra fancy, we're going to add the opacity property. Let's set opacity to 50%. If we refresh, we can see that we've changed all the attributes to the border at mouseover.

[1:20] There are many things you can do to borders at mouseover using the hover pseudo-class, including changing the border style, border color, border width, and border opacity.

Course

CSS Tips and Tricks on :hover Effects

Use the :hover CSS pseudo-class to change border effects in multiple ways on mouse-over

Share this video with your friends