버튼에 표시되지 않도록 라디오 버튼에 사용 된 내용 (이미지) 정렬

Question

현재 각 버튼에 이미지를 삽입하기 위해 CSS 속성 내용을 사용하고 선택한 경우 불투명도가 변경되는 두 개의 라디오 버튼이 있습니다. . 원본 라디오 단추는 여전히 이미지의 왼쪽에 표시됩니다. 이미지를 원래의 라디오 버튼 위에 가운데 놓 이도록 이미지를 이동하는 방법이 있습니까?

#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

만약이 FIDDLE이 당신이 찾고있는 제품 일까.

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; 
}