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

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

Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years ago

In this lesson, you will set a background-image for a CSS class, and swap it out to another background-image on :hover to achieve the "change image on hover" effect.

The CSS background-image property allows you to set an image as a background of a DIV.

By creating a class with width, height, and the background-image set, you can insert a DIV in your HTML page set to that class, and utilizing the :hover pseudo-class, replace the image that shows up on mouse-over.

Hiro Nishimura: [0:00] Let's create a CSS class for this lesson. I'll name mine effect. I have two 300px by 200px images that I want to use to create the switch on hover effect. I will set the width and height of this class to 300px and 200px. Then, we set the background image property for this class by specifying the image url.

[0:20] In our index.html, we insert not an image but a div set to the class "effect." When we refresh the browser, we see that the image shows up. To better see how this image is a background to the div, let's enter some text.

[0:32] I'll create a paragraph element within the div. When we refresh the browser, we can see that the text seems to appear in front of the image. This is because the image is a background image. Now, let's set the hover pseudo-element so we can create effects to occur on mouseover.

[0:46] Because I have two images with the same width and height, I don't need to specify them again, since those properties will be inherited from the effect class. I'll just change the image. When we refresh the browser, we can see that the image changes on mouseover.

[0:59] We learned how to create a class with a background image so that we can create a change image on mouseover effect. We also inserted some text to show how this image is a background image and behaves how a background image on an HTML page would behave.

[1:12] By setting the width and height, we controlled how big the div is. By default, if I were to say double the width, because this is a background image, the image will repeat to fill the space.

egghead
egghead
~ 44 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