HTML/CSS 이미지 미리보기 roll over

Question

나는이 해결책에 대해 어제 여기에 질문을했고, 나는 그것을 풀어서 정확한 답을 표시했다고 생각했지만 지금은 그것이 옳지 않다는 것을 알았다.

나는 기본적으로 내가이 원하는, 바이올린 놀아 봤는데 .. 왼쪽에

다음 띄운 상태에 나는 푸른 오버레이하고 싶습니다, 비 상태를 맴돌고 것 텍스트 '프로젝트보기'.

여기 제가 노는 피들입니다. 내가 보여 줄 수없는 유일한 것은 텍스트입니다.

<div class="cont"> 

<div class="work-thumb"><img src="http://www.menshealth.co.uk/cm/menshealthuk/images/qQ/mh-face-off-winner-MED-07032011.jpg" /><a class="roll-text">View</a></div> 

주의해야 할 몇 가지

jsFiddle ... <img>는 응답해야합니다. 그래서 'view project'도 응답해야합니다 (고정 픽셀 너비를 사용할 수 없음).

도움을 주시면 감사하겠습니다. 앵커에게의 div 요소 자체를하지 유혹 할 때 감사

Answer 1

당신은 텍스트를 활성화해야합니다

.work-thumb:hover a.roll-text { 
    display: inline-block; 
    position: absolute; 
    top: 20px; 
    left: 10px; 
    text-align: center; 
    color: #fff; 
} 

가 updated jsFiddle를 참조하십시오.

Answer 2

형제 선택기 +을 사용하여 숨겨진 텍스트를 표시 할 수도 있습니다. 하지만 그것은 반응

Demo

.work-thumb img:hover + .roll-text { 
    display:block; 
}