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

Share this video with your friends

Send Tweet

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.