⚠️ This lesson is retired and might contain outdated information.

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

Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years ago

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.

Hiro Nishimura: [0:00] Create a new class in your CSS. I named mine effect. Set opacity to 100%. Opacity is the transparency level of the element, and goes from to 1, or % to 10%.

[0:11] Set the :hover selector to the class to change the opacity on mouseover. The :hover selector tells the browser what to do on mouseover. In this case, because I set the opacity to 30%, the element will have 30% opacity and will create the fade-out effect.

[0:28] The first element in this lesson is an image. Set the image class to effect. If you refresh the browser, you can see that the image has the fade-out effect at mouseover.

[0:40] To create the fade-in effect, you can flip the values. Keep in mind that these can be any pair of values between % and 100%. I'll stick with 30% and 100%. Now, when you refresh the page, you'll see you have the fade-in effect at mouseover.

[0:59] The element can also be text. Let's type in some text and set the class to effect. When we refresh the browser, we can see that both the image and the text have the fade-in effect at mouseover.

[1:13] We use the :hover selector to change the opacity of two elements, an image and text. By going from an opacity of less to more, in this case from 10% to 80%, we created the fade-in effect. By going from opacity of more to less, in this case from 80% to 10%, we created the fade-out effect.

egghead
egghead
~ 40 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today