호버 위의 CSS 보이지 않는 검정색 오버레이
호버 시 이미지에 투명한 검정색 오버레이를 얻는 것은 순수한 CSS를 사용하여 실제로 가능합니다. 그러나 오버레이 div 사용과 관련된 초기 코드 샘플에 언급된 접근 방식은 위치 지정 및 가시성 문제로 인해 적합하지 않을 수 있습니다.
더 효과적인 솔루션은 의사 요소를 활용하는 것입니다. 작동 방식은 다음과 같습니다.
CSS 코드
.image { position: relative; /* Set dimensions as needed (or omit for responsiveness) */ width: 400px; height: 400px; } .image img { width: 100%; vertical-align: top; } .image:after { content: '\A'; /* Pseudo content to trigger browser rendering */ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); /* Black with 60% opacity */ opacity: 0; /* Initially invisible */ transition: all 1s; /* Animation transition */ } .image:hover:after { opacity: 1; /* Shows overlay on hover */ }
설명
추가 기능
텍스트 추가:
마우스를 올리면 오버레이에 텍스트를 추가하려면 의사 요소 스타일 내에서 콘텐츠 속성을 사용할 수 있습니다. 예를 들어:
.image:after { content: 'Hover Text...'; /* Custom overlay text */ }
사용자 정의:
불투명도와 전환 속도를 조정하여 가시성 효과를 수정할 수 있습니다. 또한 배경 이미지나 그라데이션을 추가하여 더욱 복잡한 오버레이를 만들 수 있습니다.
위 내용은 의사 요소를 사용하여 이미지 호버에 CSS 보이지 않는 검정색 오버레이를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!