CODEWITHSUNDEEP
htmlcssbuttonhover
John Makati
John Makati

Reputation: 81

How to change the image in my button on hover?

Im trying to change the image on my button on hover, however, all I find online uses background image in css, I don't want that and that uses all of the space in the button. I want it to just swap the initial image with the final image, this is because, in the mobile version of my webpage I want it to change the background color of the button and change the image with the same image but in a different color.. So far, I have got this:

HTML and CSS

.btnExample{
   width: 60px;
  height: 60px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: 3px #01509f;
  color: black;
  background-color: #fff;
  border-radius: 100%;
  margin-left: 20px;
  
  text-align: center;
 
}

.btnExample:hover{
  background-color: #000;
}
<button class="btnExample"  >
    <img src="https://www.pngfind.com/pngs/m/2-24642_imagenes-random-png-cosas-random-png-transparent-png.png" width="18" height="18" alt=""/></button>

this inserts an image inside my button without being a background image and changes the background color from white to black. Now, how do I replace it with another image on hover?

Upvotes: 0

Views: 1720

Answers (1)

Showhan Ahmed
Showhan Ahmed

Reputation: 109

You can use another img tag below the current one, and use different classes, so that they can be used on different purposes as follows.

<button class="btnExample">
    <img class="init_img" src="https://www.pngfind.com/pngs/m/2-24642_imagenes-random-png-cosas-random-png-transparent-png.png" width="18" height="18" alt=""/>
    <img class="hover_img" src="Screenshot_2.png" width="18" height="18" alt=""/> <!-- Add the hover image URL here -->
</button>

Additional CSS:

.hover_img {
    display: none;
}
.btnExample:hover .hover_img {
    display: inline-block;
}
.btnExample:hover .init_img {
    display: none;
}

Otherwise, I think you can use JS/jQuery to show a different image on hover since there is no option to show a different image from a same img tag using CSS.

Upvotes: 1

Related Questions