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

Share this video with your friends

Send Tweet

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.