다양한 높이의 이미지에서 작동하는 CSS를 사용하여 이미지 오버레이를 만드는 방법은 무엇입니까?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!