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

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.