이미지의 크기에 div를 오버레이합니다.

Question

이것은 약간의 질문입니다. 본질적으로 저는 롤오버에 컬러 오버레이 (div)가 표시되고 그 div 내에 약간의 텍스트가있는 이미지 격자를 만들고 있습니다. 이 웹 사이트는 http://twoarmsinc.com/work/category/all과 매우 유사합니다. div 대신 이미지 대신 div를 사용하면 쉬울 것입니다. 다른 div 안에 오버레이를 중첩시키고 너비와 높이를 100 %로 설정하십시오. 그러나 이미지 내에서 중첩 할 수 없으며 이미지의 크기가 반응적으로 변하기 때문에 어떻게해야합니까? 반응 형 그리드 시스템 (Simple Grid)을 사용하기 때문에 배경 이미지가 제대로 작동하지 않을지 확신 할 수 없습니다.

는 여기 CodePen있어 : http://codepen.io/anon/pen/iIsGm/

HTML :

이

<div> 
    <div class='overlay'></div> 
    <img src="http://placekitten.com/300/200" alt="thumb"> 
</div> 

가 CSS : 다음에 해당하는 경우에는 ambiguity- 모든 도움을

이

.overlay{ 
width:100%; 
height:100%; 
background:#333; 
position:relative; 
z-index:10; 
} 

사과가 대단히 감사합니다!

Answer 1

우선 을 img으로 바꿔야합니다. 스택에 두 번째로 오게됩니다.

.container div에는 몇 가지 옵션이 있지만 격자를 설정하려면 너비를 설정해야합니다. 나는 그것을 바이올린에 포함시키지 않았지만 img을 max-width: 100%; width: auto; height: auto;으로 설정하려고 할 것이므로 브라우저의 크기를 조정할 때 크기를 조정하고 가로 세로 비율을 유지할 수 있습니다. .container의 경우 float: left을 width으로 설정하여 사용할 수도 있습니다. 나는 코드의 양을 줄이기 위해 여기서 display: inline-block을 사용했다.

DEMO

DEMO with multiple divs floating and simple grid

CSS :

.overlay{ 
    background:rgba(0,0,0,0.5); 
    position:absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    color: white; 
    opacity: 0; 
    -webkit-transition: opacity 0.5s; 
    transition: opacity 0.5s; 
} 

img { 
    display: block; 
} 
.container { 
    position: relative; 
    display: inline-block; 
} 

.container:hover > .overlay { 
    opacity: 1; 
} 

HTML : 완벽

<div class="container"> 
    <img src="http://placekitten.com/300/200" alt="thumb"> 
    <div class='overlay'>Some text</div> 
</div>