Change Image on Hover in CSS

How to change image on hover with CSS?

The «hover» pseudo-class is used to select and apply styles to an HTML element when a user hovers their mouse over it.

Changing an image on hover with CSS is a simple process that can add an extra layer of interactivity to the website. Here, we will learn step-by-step guide to changing an image on hover with CSS −

Prepare the images

The first step in changing an image on hover using CSS is to have the two images you want to use: the default image and the hover image. Make sure these are both saved on your website and that you know the URLs for each.

Add the default image to your HTML

Use the img tag and specify the source (src) of the image. For example −

Add a hover rule to your CSS

In the CSS file, we add a rule to change the image on hover. we will do this by targeting the div tag and specifying a :hover pseudo-class. For example −

Example

Here is an example to change the image on hover using CSS.

     
Change Image on Hover Using CSS
   

Conclusion

To change an image on hover using CSS is a simple yet effective way to add an extra layer of engagement to the website. It is a great way to create an interactive experience for users, which can help to keep them on the site longer and increase their overall satisfaction.

Источник

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.

Источник

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:

Источник

How to Change Image on Hover using CSS?

There are several methods that we can use to change images on hover. In this article, we are going to learn the two most commonly used methods which we can use to swap images on hover.

Let’s look at both methods in detail.

Change Image on Hover using the background-image Property

The basic idea of this method is to set the first image as a background image of a div element and then replace it with the second image when we hover over it simply by changing its URL.

To set an image as a background image of an element we use the background-image property and to add the hover effect we have to use the :hover pseudo-class.

Example:

Change Image on Hover using the display Property

In this method, we put the two images inside a div container and show only of one them at a time. That is, we display the first image by default and keep the second image hidden by setting the display property to none .

And when we hover over the container, we display the second image on the top of the first image simply by setting the display property to inline and setting its z-index to a higher value such as 99 or 999.

But only specifying the z-index and display property isn’t enough for this approach. Because we have to place the two images on top of each other.

To do this, we have to set the div container’s position to relative and that of the images to absolute so that we can place both the images at the same position using the top, left, bottom and right properties.

Example:

.container < width: 250px; height: 250px; border: 2px solid red; position: relative; >.container img < width: 100%; position: absolute; left: 0px; top: 0px; >.img-top < display: none; /* Hide top Image */ z-index: 99; >.container:hover .img-top< display: inline; /* Show top Image */ >

Related posts:

Источник

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.

Источник