Aligning content (image) used in radio button so that button wont show

Question

I currently have two radio buttons in a form that I have used the CSS property content to insert an image for each button and that changes in opacity when selected or not. The original radio button still shows to the left of the image. Is there any way move the image so that it is centered over the original radio button?

#button1,
#button2 {
   height: 150px;
   width: 150px;
   margin-left: 10%;
   margin-right: 10%;
}

#button1 {
   content: url(../assets/logo.gif);
   opacity: .4;
   -webkit-transition-duration: 1.5s;
}

Answer 1

I wonder if this FIDDLE is what you're looking for.

HTML

<label class="mickey" for="button1">
      <input id="button1" type="radio" name="testme" />
      <img src='http://i.imgur.com/Q7IJUNJ.png?1' alt='' />
</label>

<label class="mickey" for="button2">
      <input id="button2" type="radio" name="testme" />
      <img src='http://i.imgur.com/73kXZTR.jpg' alt='' />
</label>

CSS

#button1, #button2 {
    display: none;
}
input[type=radio] + img{
  cursor:pointer;
  border: 2px solid blue;
  opacity: 0.5;
}
input[type=radio]:checked + img {
  border: 2px solid red;
  opacity: 1.0;
}
img {
    height: 100px;
    width: 100px;
}