1. hidden이미지와 spot이미지 겹치기 
2. :hover시 spot이미지 작아지면서 hidden이미지 보이기+확대 
3. 수직 중앙정렬(margin_top,margin-bottom) 에러

1. visibility:hidden을 건 이미지와 spot 이미지(spot은 그냥 제가 지은 이름)를 같은 위치에 두고싶은데요
position:relative; z-index:1; 을 하면 서로 밀어내서 같은 위치에 못두더라고요..
크기가 창 크기에 따라 달라지도록 width:100% 해둔 이미지라 position:absolute를 쓰는것도 힘들고요..
방법 없을까요?

2, 3. :hover 써서  spot 이미지가 작아지도록
.spot:hover {width:0%;  margin-top: auto; margin-bottom: auto; margin-left: auto;  margin-right: auto; vertical-align: middle;} 까지 넣어봤는데요
가운데로 작아지도록 하고 싶었는데 이렇게 쓰니까 왼쪽으로 움직이면서 작아지더라고요..
이미지 감싼 div에 line-height써서 이미지에 vertical-align을 중앙정렬하면 수직 중앙정렬 된다고 해서 해봤는데 적용이 안되더라고요..? ㅜ
중앙정렬.. 정말 어렵네요..

또 spot 이미지에 hover되었을때 hidden 이미지의 visibility를 visible로 바꾸면서 width:100%로 하려고 하는데
방법을 도저히 모르겠어요
a이미지에 hover 되었을때 b이미지가 커진다! 를 하려면 어떻게 해야하는지.. ㅜㅜ

지금 학교에서 밤새면서 검색 계속 해보고는 있는데 질문이 복잡한만큼 원하는 답이 안나오네요..

부탁드립니다 ㅜㅜ