How to put the hover image above the original image


Tags: html,css,html5

Problem :

So i made a upvote/downvote button, i want the image to change when someone hover on it. Check this fiddle If you look closely, the image is changing when you over but it is behind the original image. How to fix it?

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="buttons">
<input type="image" class="buttonup" id="plus" style="vertical-align:middle" src="http://i.imgur.com/jWPUjR9.png" /> <span id="count">1453</span>
  <input type="image" class="buttondw" id="minus" style="vertical-align:middle" src="http://i.imgur.com/Vu6tuf9.png" />

</div>

CSS:

#buttons{margin-left: 35%; margin-right:35%;}
.buttonup {
 padding: 0px;
 width: 50px;
 cursor: pointer;
 margin-right: 0px;
}

#count {
display: inline-block;
border-radius: 0px;
background-color: #33cc33;
border: none;
color: #ffffff;
text-align: center;
font-size: 18px;
padding: 7px;
width: 50px;
margin-top: 0px;

 }

.buttondw {
width: 50px;
cursor: pointer;
margin-left: 0px;
} 

.buttonup:hover {
background-image: url("http://i.imgur.com/SFjZ9FD.png")
 }
.buttondw:hover {
background-image: url("http://i.imgur.com/aVAeO0F.png")
}


Solution :

I suggest to use <button> + background image.

#buttons {
  margin-left: 35%;
  margin-right: 35%;
}
#count {
  display: inline-block;
  vertical-align: middle;
  border-radius: 0px;
  background-color: #33cc33;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 7px;
  width: 50px;
  margin-top: 0px;
}
.buttonup,
.buttondw {
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: transparent;
  border: 0;
  vertical-align: middle;
}
.buttonup {
  background-image: url("http://i.imgur.com/jWPUjR9.png");
}
.buttondw {
  background-image: url("http://i.imgur.com/Vu6tuf9.png");
}
.buttonup:hover {
  background-image: url("http://i.imgur.com/SFjZ9FD.png");
}
.buttondw:hover {
  background-image: url("http://i.imgur.com/aVAeO0F.png");
}
<div id="buttons">
  <button class="buttonup" id="plus"></button> <span id="count">1453</span>
  <button class="buttondw" id="minus"></button>
</div>

If you need one button at the top and one at the bottom, you can wrap each group into a div.

<div id="buttons">
  <div>
    <button class="buttonup" id="plus"></button> <span id="count">1453</span>
  </div>
  <div>
    <button class="buttondw" id="minus"></button>
  </div>
</div>

#buttons {
  margin-left: 35%;
  margin-right: 35%;
}
#count {
  display: inline-block;
  vertical-align: middle;
  border-radius: 0px;
  background-color: #33cc33;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 7px;
  width: 50px;
  margin-top: 0px;
}
.buttonup,
.buttondw {
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: transparent;
  border: 0;
  vertical-align: middle;
}
.buttonup {
  background-image: url("http://i.imgur.com/jWPUjR9.png");
}
.buttondw {
  background-image: url("http://i.imgur.com/Vu6tuf9.png");
}
.buttonup:hover {
  background-image: url("http://i.imgur.com/SFjZ9FD.png");
}
.buttondw:hover {
  background-image: url("http://i.imgur.com/aVAeO0F.png");
}
<div id="buttons">
  <div>
    <button class="buttonup" id="plus"></button> <span id="count">1453</span>
  </div>
  <div>
    <button class="buttondw" id="minus"></button>
  </div>
</div>


    CSS Howto..

    How to apply table css to this structure?

    How to handle CSS code in my Android email app?

    How to automatically compile LESS into CSS on the server?

    How to handle long string where characters stick together

    How to center an icon inside css shapes?

    how to position an “Insert row” button in front of each horizontal row border of a table?

    Why is my text not showing in my DIV?

    How would I have a larger center bottom navbar button in jQuery Mobile default navbar?

    How to center a Dijit Select widget?

    Semantic UI css messing with min-width property. How do I fix?

    How to program the navigation bar(image) web html

    How to create an Hours of Operation list with HTML and CSS?

    How to serve css files in djangos's flatpages?

    How to make a radio looks like disabled but don't specify disabled=“disabled”, just using css and js

    How to target Android stock/native browser to adjust CSS

    How to scroll a page or a element using css

    How to create a firefox addon which injects CSS into a page? [closed]

    How can I push to the top an element using slideUp?

    How to edit and see live CSS effect in IE8 like we see in Firefox > Web developer toolbar > Edit CSS function?

    How to create triple div border in CSS

    How to get the CSS left, top, width, height from coords?

    activating “authorization” causes CSS stop working! how solve it?

    Jquery, CSS - How to set element as first in list

    How to add CSS if element has more than one child?

    How can I make inputs display inline?

    Show submit button as an image

    how to add a permanent line on top of ios7 in phonegap

    how to remove extra css and js link in twitter-bootstrap-rails

    How to create a responsive top bar with CSS

    When using WebFont loader, how to hardcode the css?