CSS를 사용하여 이미지 호버에 텍스트와 아이콘으로 어두운 오버레이 효과를 만드는 방법은 무엇입니까?

CSS로 이미지에 오버레이 효과 만들기

이 글에서는 텍스트로 어두운 오버레이 효과를 얻는 방법을 살펴보겠습니다. CSS를 사용하여 이미지 위로 마우스를 가져가면 아이콘이 표시됩니다.

문제:

이미지 위로 마우스를 가져가면 사용자 정의된 어두운 오버레이가 표시되는 대화형 이미지 갤러리를 만드는 것이 목표입니다. 제공된 이미지에 표시된 대로 콘텐츠를 제공합니다. 문제는 일관된 너비로 다양한 높이의 이미지에 대해 이 효과를 달성하는 것입니다.

해결책:

이를 달성하기 위해 HTML과 CSS의 조합을 사용합니다. 다음과 같습니다:

HTML 마크업:

`

<img  src="/static/imghwm/default1.png" data-src="image-url" class="lazy" alt="CSS를 사용하여 이미지 호버에 텍스트와 아이콘으로 어두운 오버레이 효과를 만드는 방법은 무엇입니까?" >
<div class="after">This is some content</div>

> ;`

CSS 스타일 규칙:

<code class="css">.image-container {
    position: relative;
    width: <fixed width>;
}
.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);
}</fixed></code>

이 코드에서 .image-container는 이미지 및 오버레이 div에 대한 래퍼 역할을 합니다. .after의 위치 지정은 오버레이가 전체 이미지를 덮도록 보장하는 반면, 조건부 표시 속성은 오버레이가 마우스 오버 시에만 표시되도록 합니다. .after div 내의 배경 색상과 콘텐츠를 수정하여 오버레이 모양을 맞춤 설정할 수 있습니다.

맞춤 설정:

제공되는 솔루션은 기본 템플릿 역할을 합니다. 추가 CSS 규칙을 추가하여 미학을 향상할 수 있습니다. 예를 들어, 오버레이 내에서 콘텐츠를 수직으로 정렬하거나, 아이콘 스타일을 변경하거나, 더 부드러운 호버 애니메이션을 위한 전환 속성을 포함할 수 있습니다.

다음은 추가 스타일을 적용한 수정된 예입니다.

<code class="css">.image-container .after .content {
    position: absolute;
    bottom: 5px;
    text-align: center;
    width: 100%;
    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>

이 업데이트된 코드에서 오버레이 콘텐츠는 중앙 정렬로 하단에 배치됩니다. 또한 마우스를 올리면 색상이 변경되는 확대/축소 아이콘이 추가되었습니다. 이러한 사용자 정의는 제공된 솔루션의 유연성을 입증하고 맞춤형 이미지 오버레이를 생성할 수 있는 능력을 부여합니다.

위 내용은 CSS를 사용하여 이미지 호버에 텍스트와 아이콘으로 어두운 오버레이 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!