So i made a upvote/downvote button, i want the image to change when someone hover on it. Check this [fiddle](https://fiddle.jshell.net/g6Lhurae/30/)
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")
}

```