teh kc teh kc - 5 months ago 9
CSS Question

How to put the hover image above the original image

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")
}

Answer

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>