> 웹 프론트엔드 > CSS 튜토리얼 > 다양한 높이의 이미지에서 작동하는 CSS를 사용하여 이미지 오버레이를 만드는 방법은 무엇입니까?

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

Patricia Arquette
풀어 주다: 2024-10-31 07:52:02
원래의
815명이 탐색했습니다.

How to Create an Image Overlay with CSS That Works on Images of Varying Heights?

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿