CSS로 이미지 오버레이를 만드는 방법
문제:
원하는 작업 이미지 위로 마우스를 가져가면 이미지 위에 텍스트와 아이콘이 포함된 어두운 오버레이를 배치할 수 있습니다. 그러나 이미지 높이가 다양하고 이전 튜토리얼이 성공하지 못했기 때문에 어려움에 직면하고 있습니다.
해결책:
이 효과는 다음을 통해 얻을 수 있습니다. CSS 코드:
<code class="css">.image-container { position: relative; width: 200px; height: 300px; } .image-container .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #FFF; } .image-container:hover .after { display: block; background: rgba(0, 0, 0, .6); }</code>
HTML:
<code class="html"><div class="image-container"> <img src="http://lorempixel.com/300/200" /> <div class="after">This is some content</div> </div></code>
추가 스타일:
더 세련된 모양을 원하시면, 다음 CSS를 추가해 보세요:
<code class="css">.image-container .after .content { position: absolute; bottom: 0; font-family: Arial; text-align: center; width: 100%; box-sizing: border-box; padding: 5px; } .image-container .after .zoom { color: #DDD; font-size: 48px; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -19px; height: 50px; width: 45px; cursor: pointer; } .image-container .after .zoom:hover { color: #FFF; }</code>
데모:
여기에서 데모를 확인하세요: http://jsfiddle.net/6Mt3Q/
위 내용은 다양한 높이의 이미지에서 작동하는 CSS를 사용하여 이미지 오버레이를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!