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..

    Not sure how to use css selectors

    How to write css for a color when you only know the color in the RGB format [duplicate]

    How can I make a DIV element Fixed but non-Scaleable?

    How do you scroll the page content over a cover image (like medium.com)?

    How to change css by using tag or class name in typescript?

    How to create page breaks automatically in CSS?

    How to make inline-block with CSS

    How can images be resized using Bootstrap

    How do check the Css properties for an element when pressed in Google Chrome Developer Tools

    How to test for css properties like modernizr.js

    How to enable background printing by default using css or javascript?

    How to resize animated gif with HTML/CSS?

    How do I prevent text from flowing onto different sections of a page?

    How do I display all the data in a MySQL table in a theme? [closed]

    How to keep nav menu highlighted after click using js in sidebar

    How to use CSS property position:fixed with top:50px and height:100%?

    Show X and Y coordinates?

    How to theme elgg with HTML and CSS only? [closed]

    How to apply an effect of white lines crossed to a div with css

    How to add multiple css files to CKEditor editorarea

    How to vertically center text with CSS?

    How to reduce my code in both jQuery and CSS

    How to make partial scrolling div?

    CSS - How it works

    How to bring up a div box while hovering over a span tag in a section?

    How to detect if browser support specified css pseudo-class?

    How to apply css for min-width and print?

    how to access anti aliasing method of a font with CSS

    How to id dom table so I can position it on page?

    css selector question, how to change font colover of parent li when child ul is focused