이미지 위로 가져갈 때 반응 오버레이 표시

Question

오버레이 된 이미지 위에 오버레이를 표시하고 싶습니다.

나는 오버레이 이미지가 반응하고 화면에 적응하려면 :

width:100%; 
height:auto; 

이 실제 이미지에 노력하고 있지만, 필자는 피곤 내가에게 오버레이를 추가 할 때 내가 얻을 볼 캔트 응답은 오버레이로 백분율을 사용합니다. 화면이 크고 작은 드래그 할 때 http://jsfiddle.net/w2NV3/

그래서 나는 이미지와 %를 사용하여 화면을 확대 할 수있는 오버레이를 원하는 : 여기

데모입니다.

건배

Answer 1

쓰기 :

.grid li { 
    padding:0 
} 
#mainwrapper .box .slide-caption { 
    width: calc(100% - 30px); 
    height: calc(100% - 30px); 
    text-align: left; 
    padding: 15px; 
    left: 100%; 
} 

Updated fiddle here.

Answer 2

체크 아웃 famcybox : http://webdesignandsuch.com/fancybox-image-overlay-packaged-for-download/

나는 이것이 당신이