How to Change Image on hover with CSS ?
Last Updated :
06 Mar, 2024
To change an image on hover with CSS, use the :hover pseudo-class on the image element and alter its properties, such as background-image or content, to display a different image when hovered over.
Here are some common approaches to changing the image on hover:
1. Using Background Image Swap:
In CSS, background image swap involves using the :hover pseudo-class on an element and changing its background-image property to a new image URL upon hover, providing a seamless transition effect and enhancing user interaction with the webpage.
Example: Here, we are swapping the background image of an element on hover using CSS. The initial image is set with background-image, and :hover pseudo-class changes it smoothly.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to Change Image on
Hover in CSS
</title>
<style>
.sudo {
width: 230px;
height: 195px;
margin: 50px;
background-image: url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
background-size: cover;
transition: background-image 0.3s ease-in-out;
}
.sudo:hover {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png");
}
</style>
</head>
<body>
<h2>GeeksForGeeks</h2>
<h2>
changing image on
hover by Using Background Image Swap
</h2>
<div class="sudo"></div>
</body>
</html>
Output:
Using Background Image Swap
2. Using Content Property:
The Content Property utilizes CSS's ::before and ::after pseudo-elements to insert content before or after an element, often used for generating dynamic content or altering the appearance of elements.
Example: In this example we demonstrates changing an image on hover using the Content Property. The ::before pseudo-element is utilized to display different images before and after hover, providing a smooth transition effect.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover</title>
<style>
.image-container {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.image-container::before {
content: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.3s ease-in-out;
}
.image-container:hover::before {
content: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png');
}
</style>
</head>
<body>
<h2>GeeksForGeeks</h2>
<h2>
changing image on
hover by Using Content Property
</h2>
<div class="image-container"></div>
</body>
</html>
Output:
Using Content Property
Similar Reads
How to Change Image Opacity on Hover using CSS ? Changing the opacity of an image on hover can add a more elegant and interactive effect to your website. This simple yet effective technique can be implemented using CSS. When a user hovers over an image, it gradually becomes more transparent, pointing out the interaction and creating an attractive
2 min read
How to Change Image on Hover using Tailwind CSS? One common effect is changing an image when the user hovers over it. We use Tailwind CSS, a utility-first CSS framework, to accomplish this without any additional JavaScript logic for the hover effect. By utilizing Tailwind's built-in classes we can create smooth transitions between two images where
2 min read
How to Flip an Image on hover using CSS? Flipping an image with a mirror effect on hover using CSS enhances visual interaction by applying transformations along the X or Y axis. This dynamic hover animation creates an engaging experience by flipping the image horizontally or vertically, resulting in an eye-catching, interactive effect.Appr
2 min read
How to Change Tabs on Hover with CSS and JavaScript ? In this article, we are going to learn how can we change tabs on hover, with CSS and JavaScript. Changing tabs on hover enhances the user experience by offering interactive hover navigation. Users can quickly preview different sections without clicking which reduces the time it takes to explore diff
4 min read
How to Zoom an Image on Mouse Hover using CSS? CSS plays a vital role in styling modern websites, with over 90% of sites using it for visual effects and responsive layouts. One popular effect is image zoom on hover, which enhances user experience and adds visual appeal. In this article, you’ll learn three simple ways to create image zoom effects
2 min read