CSS에서 이미지를 클릭하여 "표시"할 수 있습니까?

Question

저는 userstylesheet를 사용하여 모든 이미지를 맨 오른쪽으로 이동한다는 점에서 웹 페이지를 수정하고 있습니다. 난 그냥 "그것을 가지고 이미지를 클릭 할 수 있다면 http://i.stack.imgur.com/nJUyK.png

그래서 궁금 : 그것은 모든 나는 또한 RES의 드래그 줌과 상황이 지저분한 비트를 얻을 몇 가지 다른 사이트를 사용 레딧을 제외하고 일하고있어 "그 고밀도 이미지 혼란에서. CSS에서 가능합니까 (CSS 사용자 스타일 시트 만 사용하고 있습니다)하지만 어떤 대안이든 열려 있습니다.

Answer 1

당신은 재 스타일 체크 박스/라디오 버튼
을 사용하여 할 수 (출처 : http://www.inserthtml.com/2012/04/css-click-states/)

은 - - 표시에 이미지를 던져 컨테이너

<form class="clickable"> 
    <label for="the-checkbox">Click Me!</label> 
    <!-- Radiobuttons should do it, too! --> 
    <input type="checkbox" id="the-checkbox" /> 
    <!-- This is the div we want to appear and disappear --> 
    <div class="appear">Some text(image to appear</div> 
</form> 

에 체크 박스 (스타일을 당신이 원하는대로)

이제 의사 선택기 :checked을 사용하여 이미지의 가시성 (또는 케이스의 z- 색인)을 전환 할 수 있습니다.

.clickable .appear { 
    display: none; 
} 

.clickable input:checked ~ .appear { 
    /* Or change the z-Index here */ 
    display: block; 
} 

위에 링크 된 기사 하단의 "빠른 데모"를 확인하십시오.
CSS 선택기로 클래스 또는 태그 이름 대신에 id를 사용하는 것도 가능합니다. 그래서 여러 이미지를 전환하는 것이 문제가되지 않아야합니다.
라디오 버튼을 사용하면 다음 버튼 (선택 안함, 단지 아이디어)을 클릭 할 때 마지막으로 선택한 버튼이 선택 취소된다는 매력이 있습니다. 당신은 CSS3를 사용할 수있는 경우

Answer 2

, 당신은이를 확인할 수 있습니다 : http://designshack.net/tutorialexamples/HoverEffects/Ex2.html

기본적으로

img { 
height: 100px; 
width: 300px; 
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
-o-transition: all 1s ease; 
} 

and 

img:hover { 
height: 133px; 
width: 400px; 
margin-left: -50px; 
}