CSS 단추를 위로 축소 그림

Question

나는 이것을 어떻게 처리해야할지 모르겠습니다. 나는 전에 전혀 이런 일을하지 않으려 고 노력 했으므로 나는 지혜로운 사람들의 지혜를 구하기 위해 여기에 뛰어들 것이라고 생각했다.

기본적으로 나는 내 페이지에 바둑판 식으로 배열 된 일련의 80x80 축소판을 가지고 있으며 엄지의 오른쪽 하단 모서리에있는 작은 더하기 단추 (마우스가있어 단추가 표시됨)를 사용하면 자바 스크립트 기능. 기본적으로 더하기 버튼은 페이지의 다른 영역에 미리보기 이미지를 추가합니다.

어쨌든 누군가가 나에게이 작업을 수행하는 방법에 대한 간단한 예를 들려 줄 수 있습니까? 버튼을 클릭 할 수있을뿐만 아니라 미리보기 이미지의 일반 이미지 부분을 클릭하면 그 엄지 손가락으로 이동합니다. 엄지 손톱 부분을 작동 시켰습니다. 버튼을 오버레이하고 실제 축소판에 클릭 가능한 요소를 만드는 방법을 알아야합니다. 나는 이것을 위해 플러스 버튼 이미지와 호버 플러스 버튼 이미지를 만들었습니다.

기본적으로 저는 출발점을 찾고 있습니다. Google에서 예제를 시도했지만 아무 것도 작동하지 않으며, 그 중 아무 것도 내가하려는 일에 실제로 맞지 않습니다. 불행히도 CSS는 내 강한 양복 중 하나가 아닙니다.

많은 도움을 주셔서 감사합니다.

Answer 1

만약 내가 제대로 이해하고, 이것을 시도 ...

.img_container {position: relative; width: 80px; height: 80px;} 

.img_container button {display: none; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px;} 
.img_container:hover {background: rgba(0,0,0,.4);} 
.img_container:hover button {display: inline-block;) 

당신의 HTML

<div class="img_container"> 
    <img src="pic.png"> 
    <button>+</button> 
</div> 

희망이 당신은 당신의 질문을 편집에 대한 관련 코드를 게시해야합니다 :)