위치 <span> 이미지

Question

내가의 축소판 ' 내 HTML은 다음과 같습니다 아래 큰 이미지 생성'위로 마우스 '는'위로 마우스 '포토 갤러리를 만들 HTML과 CSS를 사용하고

:

<div id="container"> 
    <a class="thumbnail" href="#thumb"><img src="thumb1.jpg" /><span><img src="photo1.jpg" /><br />Simply beautiful.</span></a> 

을

컨테이너를 900px 너비로 설정하고 그 아래 줄을 8 번 반복했습니다. 8 개의 미리보기 이미지를 컨테이너의 왼쪽 상단 모서리에서 한 줄에 배치합니다.

CSS 코드에서 "위쪽"을 사용하여 이미지의 위치를이 썸 라인 아래로 설정할 수 있지만 이미지의 좌우 위치는 설정할 수 없습니다. 항상 적절한 미리보기 이미지의 오른쪽에서 시작합니다.

나는 모든 것을 시도한 것처럼 보이지만 나는 가지지 않았 으면합니다.

도움말! 부디.

Answer 1

이 CSS 도와해야

.thumbnail { 
    position: relative; 
} 

.thumbnail span { 
    display: none; 
} 

.thumbnail:hover span { 
    display: block; 
    position: absolute; 
    top: 30px; 
    left: 0; 

    background: #fff; 
    padding: 10px; 
} 

이것은 엄지 좌측 에지로부터 동일한 거리에 위치 스팬한다.

동작하는 예제 :

http://www.ulmanen.fi/stuff/hoverthumb/