CSS가 이미지 호버에 투명한 검정색 오버레이를 만들 수 있습니까?

CSS를 사용한 이미지 호버의 검정색 투명 오버레이: 심층 접근 방식

쿼리:

이미지 위로 마우스를 가져갈 때 나타나는 투명한 검정색 오버레이를 만들 수 있나요? CSS?

응답:

예, CSS를 사용하면 이미지 호버에서 투명한 검정색 오버레이 효과를 얻을 수 있습니다. 방법은 다음과 같습니다.

의사 요소를 사용한 대체 접근 방식:

오버레이 요소를 사용하는 대신 이미지에서 의사 요소를 활용할 수 있습니다. 이 방법을 사용하면 응답성이 향상되고 다용성:

HTML:

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

CSS:

.image {
  position: relative;
  /* Optional dimensions */
}

.image img {
  width: 100%;
  vertical-align: top;
}

.image:after {
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}

.image:hover:after {
  opacity: 1;
}

설명:

• 직위: 친척 .image 요소에서는 의사 요소가 상위 요소를 기준으로 자신의 위치를 ​​지정할 수 있습니다.
• vertical-align: top은 이미지의 기준선 정렬을 수정합니다.
• :after 의사 요소는 오버레이를 생성합니다. 절대 위치 지정 및 검정색 반투명 ​​배경.
• 부드러운 전환을 위해 불투명도 전환이 적용됩니다. hover.

호버에 텍스트 추가(선택 사항):

호버에 텍스트를 표시하려면 의사 요소의 콘텐츠 속성을 원하는 텍스트로 설정하세요.

.image:after {
  content: 'Hover Text';
  /* Other styling... */
}

위 내용은 CSS가 이미지 호버에 투명한 검정색 오버레이를 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!