title: How Can I Hover Image On Top Of Another?
body: <p>This might be really easy for many people but I just can't do it as I am not a developer. I am trying to hover image on top of another. It works but when I hover I can still see the another image at the background. When I hover the two images (same size) overlay each other and give different color.</p>
  
  <p>Here is the CSS code:</p>
  
  <pre><code>.votebutton {
      text-align:center;
      background: transparent;
      width: 24px;
      height: 25px;
      overflow: hidden;
      float: right;
      margin: -21px -28px 0px 0px;
  }
  .votebutton a: {
  }
  .votebutton a:hover {
      background-image: url(../img/thumbs.png);
      position:relative;
      display: inline;
      z-index: 2;
      top: 2;
      height: 5px;
      width: 10px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="vote" class="votebutton"&gt;{if $anonymous_vote eq "false" and $user_logged_in eq ""} 
  
     &lt;a data-toggle="modal" href="#LoginModal" class="btn btn-mini {if $link_shakebox_currentuser_votes eq 1}btn-success{/if}"&gt;
  </code></pre>
  
  <p> {else} {if $link_shakebox_currentuser_votes eq 0}</p>
  
  <p><strong></strong> </p>
  
  <p></p>
  
  <p> here -- @Pinocchio -->
  I would really appreciate if someone from 'stackoverflow community' can help me out. Thanks.</p>
  
  <p>Edit: Have updated the full code. Thanks.</p>