CSS를 사용하여 마우스 오버 시 이미지에 텍스트가 포함된 검정색 투명 오버레이를 추가하는 방법은 무엇입니까?

CSS를 사용하여 마우스를 올리면 이미지에 검은색 투명 오버레이 추가

CSS를 사용하면 마우스를 올리면 이미지에 검은색 투명 오버레이를 생성할 수 있습니다. 이를 수행하기 위한 포괄적인 가이드는 다음과 같습니다.

의사 요소 사용

동봉된 img 요소의 오버레이 요소 문제를 방지하려면 해당 요소에 의사 요소를 삽입할 수 있습니다. 장소. img 요소를 다음과 같이 래핑합니다.

<div class="image">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="">
</div>

CSS 구성:

.image {
  position: relative;
  width: 400px;
  height: 400px;
}
.image img {
  width: 100%;
  vertical-align: top;
}
.image:after {
  content: '\A';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}
.image:hover:after {
  opacity: 1;
}

호버에 텍스트 추가

단순화를 위해 텍스트를 포함합니다. 의사 요소의 콘텐츠 값:

.image:after {
  content: 'Your Text';
  color: #fff;
}

또는 고유한 텍스트 표시를 위해 data-* 속성에 텍스트를 설정합니다.

.image:after {
  content: attr(data-content);
  color: #fff;
}

<div data-content="Text to Display" class="image">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="">
</div>

오버레이와 텍스트 결합

별도의 스타일을 사용하면 요소를 독립적으로 배치할 수 있습니다. :

.image:after, .image:before {
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
}
.image:after {
  content: '\A';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.image:before {
  content: attr(data-content);
  width: 100%;
  color: #fff;
  z-index: 1;
  bottom: 0;
  padding: 4px 10px;
  text-align: center;
  background: #f00;
  box-sizing: border-box;
}
.image:hover:after, .image:hover:before {
  opacity: 1;
}

위 내용은 CSS를 사용하여 마우스 오버 시 이미지에 텍스트가 포함된 검정색 투명 오버레이를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!