Become a member
to unlock all features

Create egghead account to access 5000+ tutorials and resources from expert developers.

Create account

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


    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.