Last Updated on August 26, 2022 by Roshan Parihar
In this tutorial, learn how to change image on hover using HTML, CSS and jQuery. The short answer is to use the background property of CSS with :hover selector.
If you want to use only jQuery for this, you can also use the jQuery attr() function with the hover() function for hover event.
Let’s find out the different examples given below.
Method 1: How to Change Image on Hover Using CSS Only
To change the image on hover using only CSS, you have to <div> element and add an image to it using background property. After that, use the :hover selector inside which you have to specify another image to replace with the previous image on div hover.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .userdiv{ width: 225px; height: 225px; background: url('/images/user1.jpg'); } .userdiv:hover{ background: url('/images/user2.jpg'); } </style> <div class="userdiv"></div> |
Output
Hover over the above image to see the changed image
The above example contains the image element. When you hover over the above image, you will get the changed image. This simple method requires only CSS and HTML to change the image on hover.
Method 2: Change Image on Hover Using JQuery Only
If you want to change the image on hover using only jQuery, you have to first add an image using the <img> element of HTML. After that, you have to use the hover() function that takes two arguments for the hover events on an image.
The first argument is to specify the new image to replace with the current image using attr() to change the source of the image. The second argument is to specify the current image to return on mouseout using the attr() function.
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $('.myimg').hover(function(){ $(this).attr('src','/images/user2.jpg'); },function(){ $(this).attr('src','/images/user1.jpg'); }); }); </script> <img src="/images/user1.jpg" alt="" class="myimg" width="225" height="225"/> |
Output
Hover over the above image to see the changed image
Now, hover over the above image to see the newly changed image using jQuery. It works the same as the previous example output. However, the method is different as the previous example uses only CSS.
Replace Img on li Mouseover Using CSS and JQuery
In addition to the above example, you can also replace images on li mouseover using CSS and jQuery. The below example shows the list of boxes using the list elements to hover and change the image. The example uses the mouseover() function with show() function and hide() function of jQuery.
Initially, the images are in a hidden state and when you hover over the button, you will get the related images.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<style> .mymultiplediv{ cursor:pointer; } .mymultiplediv{ width: 150px; border: 1px solid #ccc; margin: 10px; padding: 10px; color: #fff; border-radius: 5px; border: 1px solid #000; background: #7d7474; text-align: center; } .mydiv{ display:none; padding:10px; text-align:center; } .mydiv img{ margin: 0 auto; } .mydiv span{ text-align: center; background: #ffdede; padding: 6px 10px; display: block; width: 100px; border: 1px solid #d47c7c; margin: 8px auto; } </style> <script> $(document).ready(function(){ $('.mymultiplediv').mouseover(function() { myvar = this.id; $("div.mydiv").hide(); $('#div'+myvar).show(); }); }); </script> <div class="text-center"> <ul class="list-inline"> <li class="mymultiplediv" id="one">Show Manager</li> <li class="mymultiplediv" id="two">Show HR</li> <li class="mymultiplediv" id="three">Show Developer</li> <li class="mymultiplediv" id="fore">Show Designer</li> </ul> </div> <div class="mydiv"> <img src="/images/user1.jpg" alt="Manager"/> <span>Manager</span> </div> <div class="mydiv" id="divtwo"> <img src="/images/user2.jpg" alt="HR"/> <span>HR</span> </div> <div class="mydiv" id="divthree"> <img src="/images/user3.jpg" alt="Developer"/> <span>Developer</span> </div> <div class="mydiv" id="divfore"> <img src="/images/user4.jpg" alt="Designer"/> <span>Designer</span> </div> |
Output
Hover over the below list buttons to display image.
- Show Manager
- Show HR
- Show Developer
- Show Designer
Manager
HR
Developer
DesignerThe above example is the live example to hover over the designation of employees in a company listed above. You can hover over the list buttons given above to get the person’s image with the designation. The image changes accordingly with the mouse hover event using the mouseover() event of jQuery.
You May Also Like to Read