How to Change Image on Hover Using CSS

Hovering is a technique that uses a pointing device to interact with the element. It can be used to select or style various CSS elements such as buttons, images, menus, and many more. Applying hover on an element will change its state when a mouse triggers the specified event.

The objective of this manual is to explore how to change an image on hover using CSS. So, let’s begin!

What is :hover in CSS?

The :hover is an element of pseudo-class used to change the state of HTML elements when a mouse triggers it. This CSS selector is primarily utilized to style or select elements. However, it cannot be applied to links.

Syntax

The syntax of :hover is given below:

Here, “element” refers to the element in which you want to apply the hover effect.

Now, we will move to the practical example of changing the image on hover using CSS.

Example: How to Change Image on Hover Using CSS?

To change the image on hover first, add two images in the HTML section. The first image is for the active state, and the next one is for the hover state.

Step 1: Add Images

For the specified purpose, we will add two images, “image1” and “image2”, and assign the class name to the second image as “hover_img”.

HTML

Step 2: Style Images

Now, move to the CSS to set the position of both images using “position” property. We will set its position as “absolute” to position it absolutely with reference to its closest parent.

CSS

This will show the following outcome:

In the next step, we will set the second image in front of the first one. To do so, we will set the position of the image as “absolute” and set the top and left position as “0”. Using this image is placed in front of the first image, but we want to display the second image when a mouse hover on it. So, setting the display value as “none” will show the desired result:

Output of the given code is as follows:

Second image is successfully hidden behind the first image.

Now, move to the next step.

Step 3: Change Image on Hover

Next, use “:hover” and select “.img” to apply hover to the selected element. Then, assign the class name of the second image “.hover_img”. After that, inside the parentheses, set the value of the display property as “inline” which will force the element to fit in the same line:

Here is the result that demonstrates that the image is changed when user hover on it:

The above-given output indicates that we have successfully changed the image on hover using CSS.

Conclusion

Image can be changed on hover using the “:hover” pseudo-class element. To do so, add the required images in the HTML file, set them in the same position using CSS, and apply the :hover selector on them. As a result, the first image will change when hover over it. In this article, we have explained how to change an image on hover using the :hover with a practical example.