HTML

How to change image on hover with CSS?

The CSS hover effects give us the ability to change the CSS property. The image can also be changed using the hover on CSS. In this tutorial, we will learn to change the image on hover.

CSS background-image property

The CSS background-image along with :hover pseudo-class is used to change the image on hover. Add the image using the background-image class and add another image to the :hover pseudo-class. In addition to that, we can also set the width and height of the image.

Example: Program to change the image on hover using CSS property

Here is a program to illustrate the hover effect.

        
Change image on hover
  

Output:

Example: Change image using the display Property

Conclusion

So, here we have learned to easily change images on hover just using some properties of CSS. We have illustrated it with examples. So now you don’t need to worry about adding javascript to change the image on hover.

Источник

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.

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”.

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.

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.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

How to Change Image on Hover with CSS

To change the background image on an element in CSS on hover we can use the CSS pseudo :hover class to set a new background property.

Create an Element with a Class

First, let’s create an HTML div element with a class attribute.

Now let’s create the CSS that will give the element a background image and change the background on a hover event.

.picture  width: 600px; height: 600px; background: url('cat.jpg') no-repeat; background-size: contain; > .picture:hover  background: url('cat_hover.jpg') no-repeat; background-size: contain; > 

Change HTML img Tag Background with CSS

If you want to use HTML img tags and change the image on hover using CSS we will have to use two img tags and the position: absolute CSS property.

div class="picture"> img src="cat.jpg" alt="cat 1"> img src="cat_hover.jpg" alt="cat 2" class="hover"> div> 

.picture  position: relative; > .picture img  width: 600px; height: 600px; position: absolute; top: 0; left: 0; > .picture .hover  display: none; > .picture:hover .hover  display: block; > 

In the above example, we have a div containing the two img tags; the one with the hover class has display: none applied to it. Both images are positioned absolutely at the top left of the container div . On hover the second image is set to display, covering the first image.

Conclusion

You now know how to display an image on hover when the background image is in the HTML source or in the CSS.

Источник

Change image source (src) on hover using CSS

In this post, we will see how to change images on hover using CSS.

We cannot change the tag src (source) using CSS directly. For that, we have to use JavaScript function.

However, we can swap or replace the tag of the element using CSS.

To change image on hover with CSS:

1. Use :hover selector to change the background-image property of a div.
2. Change the display property of the tag on hover with CSS.

Let’s understand it with examples.

Change background Image on hover

To change the image of a div, we can use the :hover selector to change the url source of the background-image property on mouse hover.

Let’s say we have an HTML div element with a class name as «my-image«.

Now let’s add the background image to the my-image div and add the :hover selector to change or swap the background when a user hovers over the div.

.my-image< background-image: url('image1.jpg'); height: 100px; width: 100px; > .my-image:hover< background-image: url('image2.jpg'); > 

Now, when a user hovers their mouse over the div, the background image (here image1.jpg) will be replaced by image2.jpg

Change image on hover using the display property

We can also change the image tag on our HTML page using the display property of CSS.

We can hide an element using display:none and show/display an element using display:block with CSS.

Let’s see an example, here we have a parent div with the class name «img-wrapper«. And it contains two tags.

div class="img-wrapper"> img src="image1.jpg" /> img src="image2.jpg" class="hover-img" /> div> 

Here, we have two tags, one with «hover-img» class.

Now let’s write the CSS to change/swap image1 with image2 on hover.

.img-wrapper < position: relative; height: 400px; width: 600px; > .img-wrapper img < position: absolute; width: 100%; height: 100%; > .img-wrapper .hover-img < display: none; > .img-wrapper:hover .hover-img < display: block; > 

In the above example, we have set the position of the parent element (img-wrapper) as relative and set the child elements as absolute .

Initially, we set the hover-img class to display:none , so that it won’t display when the page loads.

And when we hover our mouse over the parent element, the hover-img display property changes to display:block , which replace the «image1.jpg» in the parent element with «image2.jpg».

Related Topics:

Источник