Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change image on hover with CSS?
To change image on hover with CSS, we will be using the :hover pseudo-class. In this article, we have discussed two different approaches to change image on hover with CSS properties.
We are having an image in our HTML document, our task is to change the image when we hover over the image.
Syntax
/* Using background property */
selector {
background: url('image1.jpg');
}
selector:hover {
background: url('image2.jpg');
}
/* Using content property */
selector {
content: url('image1.jpg');
}
selector:hover {
content: url('image2.jpg');
}
Approaches to Change Image on Hover
Here is a list of approaches to change image on hover with CSS which we will be discussing in this article with stepwise explanation and complete example codes.
Method 1: Using background Property
To change image on hover using CSS, we have used background property with :hover pseudo-class.
- We have used container class to place the div content that is images at the center using flex and justify-content property.
- Then in the second step, we have used card class to insert an image using background property and set its dimension using CSS height and width property.
- In the last step, we have used ".card:hover" which changes the image on hovering over image which was inserted in second step.
Example
Here is a complete example code implementing above mentioned steps to change image on hover with CSS using background property
<!DOCTYPE html>
<html>
<head>
<title>Change Image on Hover with CSS</title>
<style>
.container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.card {
width: 300px;
height: 200px;
background: url('/css/images/css-mini-logo.jpg') no-repeat;
background-size: cover;
background-position: center;
border: 2px solid #ddd;
cursor: pointer;
transition: all 0.3s ease;
}
.card:hover {
background: url('/css/images/css-logo.jpg') no-repeat;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<h3>Changing Image On Hover With CSS</h3>
<p>
In this example we have used CSS <strong>:hover</strong>
pseudo-class with <strong>background</strong> property to
change image on hover with CSS.
</p>
<div class="container">
<div class="card"></div>
</div>
</body>
</html>
The output of the above code is
A rectangular card with an initial background image is displayed in the center. When you hover over the card, the background image changes smoothly with a transition effect.
Method 2: Using content Property
In this approach to change image on hover using CSS, we have used CSS content property with :hover pseudo-class which targets the image when hovered over it.
- We have used container class to place the div content that is images at the center using flex and justify-content property.
- Then in the second step, we have used card class to insert an image using content property.
- In the last step, we have used ".card:hover" which changes the image on hovering over image using CSS content property.
Example
Here is a complete example code implementing above mentioned steps to change image on hover with CSS using content property
<!DOCTYPE html>
<html>
<head>
<title>Change Image on Hover with CSS</title>
<style>
.container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.card {
content: url('/css/images/css-mini-logo.jpg');
border: 2px solid #ddd;
cursor: pointer;
transition: all 0.3s ease;
}
.card:hover {
content: url('/css/images/css-logo.jpg');
}
</style>
</head>
<body>
<h3>Changing Image On Hover With CSS</h3>
<p>
In this example we have used CSS <strong>:hover</strong>
pseudo-class with <strong>content</strong> property to
change image on hover with CSS.
</p>
<div class="container">
<div class="card"></div>
</div>
</body>
</html>
The output of the above code is
An image is displayed in the center with a border. When you hover over the image, it changes to a different image smoothly with a transition effect.
Comparison
| Method | Pros | Cons |
|---|---|---|
background property |
Better control over sizing and positioning | Requires fixed dimensions |
content property |
Simpler syntax, natural image sizing | Limited styling options |
Conclusion
Both the background property and content property methods are effective for changing images on hover. The background property offers more control over image positioning and sizing, while the content property provides a simpler approach with natural image dimensions.
20K+ Views
