Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Change Image on Hover with CSS
To change image on hover with CSS, we will be using :hover psuedo-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.
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 explaination and complete example codes.
Change Image on Hover Using background Property
To change image on hover using CSS, we have used background property with :hover psuedo-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 it's 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.
<html>
<head>
<title>
To change image on hover with CSS
</title>
<style>
.container {
display: flex;
justify-content: center;
}
.card {
width: 350px;
height: 195px;
background:url("/https/www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg")
no-repeat;
display: inline-block;
}
.card:hover {
background:
url("/https/www.tutorialspoint.com/html/images/test.png") no-repeat;
}
</style>
</head>
<body>
<h3>
Changing Image On Hover With CSS
</h3>
<p>
In this example we have used CSS <strong>
:hover</strong> psuedo-class with
<strong>background</strong> property to
change image on hover with CSS.
</p>
<div class="container">
<div class="card"></div>
</div>
</body>
</html>
Change Image on Hover Using content Property
In this approach to change image on hover using CSS, we have used CSS content property with :hover psuedo-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.
<html>
<head>
<title>
To change image on hover with CSS
</title>
<style>
.container {
display: flex;
justify-content: center;
}
.card {
content:url("/https/www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg");
}
.card:hover{
content:
url("/https/www.tutorialspoint.com/html/images/test.png");
}
</style>
</head>
<body>
<h3>
Changing Image On Hover With CSS
</h3>
<p>
In this example we have used CSS <strong>
:hover</strong> psuedo-class with
<strong>content</strong> property to
change image on hover with CSS.
</p>
<div class="container">
<div class="card"></div>
</div>
</body>
</html>
Conclusion
In this article, we have understood how to change image on hover with CSS. we have discussed two different approaches to change image on hover with CSS which are: by using background property along with :hover psuedo-class and by using content property. We can use any of the above two approaches.
20K+ Views
