title: CSS add button on top of image on hover
body: <p>I'm fairly new to CSS and I was wondering how I would place a button on top of an object when hovered. Before hovering, I have this:</p>
  
  <pre><code>input[name=uh]~a:before {
      display:block;
      position: absolute;
      top: 30px;
      right: 0;
      color:black;
      z-index: 1;
      border: solid 1px #5F99CF;
      border-right:none;
      text-align: center;
      margin-left: -1px;
      padding: 10px 0;
      background-image: url(%%Black%%);
      border-top: none;
      border-right: none;
      -moz-border-radius-bottomleft: 7px;
      border-bottom-left-radius: 7px;
      -webkit-border-bottom-left-radius: 7px;
      -webkit-transition: width 1s, height 1s; /* Safari */
      transition: width 1s, height 1s;
      width: 100%;
      height: 66px;
  }
  </code></pre>
  
  <p>And when I hover it, I want to have an image (on code below in "background-image property) on top that, and when clicked goes on a link.  However, I have no idea how to do that. I currently have this on :hover. Any help would be awesome, thanks!</p>
  
  <pre><code>input[name=uh]~a:hover:before {
      display:block;
      position: absolute;
      top: 30px;
      right: 0;
      z-index: 1;
      border: solid 1px #5F99CF;
      border-right:none;
      font-size:15px;
      line-height:15px;
      color:#999;
      text-align: center;
      margin-left: -1px;
      padding: 10px 0;
      border-top: none;
      border-right: none;
      background-image: url(%%Battlecats-Menu%%),url(%%subredditrulesbutton%%),url(%%editflairbutton%%),url(%%eventdatabutton%%);
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-size: 500px 300px, 500px 60px, 50px 60px ;
      -moz-border-radius-bottomleft: 7px;
      border-bottom-left-radius: 7px;
      -webkit-border-bottom-left-radius: 7px;
      content: "No more battle cats until you finish your homework!";
      background-color: #00ff00;
      color:white;
      text-decoration: none!important;
      width: 500px;
      height: 280px;
  }
  </code></pre>