CSS 도움말 - 이미지 분할

Question

대학 프로젝트를위한 작은 사이트를 만들고 있습니다. 대부분은 완료되었지만 기능을 추가하는 방법에 대해 계속 설명하고 있습니다.

http://wallbase.cc/toplist과 같은 사이트로 이동하여 이미지를 롤오버하면 작은 검은 색 막대가 이미지의 하단에 표시되어 크기를 보여줍니다. 나는 이것을 내 웹 사이트에 추가하고 싶지만 블랙 바에 이미지의 온탑을 보여주기 위해 어떤 CSS 규칙을 사용해야할지 모르겠다. 내가 시도한 다른 모든 것은 이미지의 측면이나 플로트에있다. 그 페이지.

페이지가 jQuery를 + DOM 생성되지만 최종 결과처럼 조금 보이는 것

:

<div id="content"> 
    <div class="error" id="pretext">Showing x results</div> 
    <div class="image"><img src="imagelink" height="200" width="200" alt="thumb"></img></div> 
</div> 

그리고 내 관련 CSS 규칙 :

#content { 
    background: #FBFBFB; 
    border: solid 1px #CCC; 
    border-top: none; 
    border-bottom: none; 
    padding: 15px; 
} 

.image { 
    width: 200px; 
    height: 200px; 
    border: 1px solid #CCC; 
    display: inline-block; 
    margin: 5px; 
} 

Answer 1

배경 이미지가있는 <div> 마스터가있는 것은 어떻습니까?

<div class="image" style="background-image: ('/images/whatever.jpg');"> 
    <div class="footerBar">[content]</div> 
</div> 

CSS로 스타일을 지정하거나 JavaScript로 이미지를 설정하십시오.

.image { 
    width: 200px; 
    height: 150px; 
    position: relative; 
} 
.footerBar { 
    background-color: lightGrey; 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    overflow: none; 
    display: none; 
} 
.image:hover .footerBar { 
    display: block; 
} 

'jsFiddle

Answer 2

이 사업부 당신 position: absolute을 설정하십시오 이미지 위에 배치하고 싶다.

Answer 3

Rhino의 아이디어는 좋은 하나의 예를 참조하지만이 div.image 내부에 남아 있도록

.image { 
    width: 200px; 
    height: 150px; 
    background-image: url("/images/whatever.jpg"); 
    position:inline-block; 
    border:1px solid green; 
} 
.footerBar { 
    position: static; 
    bottom: 0px; 
    width: 100%; 
    overflow: none; 
} 

<div class="image"> 
    <div class="footerBar">[content]</div> 
</div> 

그렇지 않으면 당신이 정적에 footerbar의 positioon을 설정할 수 있습니다 d는 페이지를 기준으로 이미지의 위치를 ​​찾기 위해 자바 스크립트를 사용하고 Z- 인덱스가 더 높은 위치에서 텍스트를 절대 위치에 배치해야합니다.