🔥HTML 및 CSS를 사용한 이미지 호버 텍스트 오버레이 효과

이 게시물에서는 HTML 및 CSS를 사용하여 아름다운 ❤️ 이미지 호버 텍스트 오버레이 효과를 쉽게 만드는 방법을 살펴보겠습니다. 이 자습서에서는 HTML 및 CSS 속성에 대한 기본 지식이 있어야 합니다.

✨ HTML 쓰기

우리의 HTML 코드는 마크업을 위한 몇 줄에 불과합니다. 코드는 다음과 같습니다.

    <div class="image">
        <img class="image__img" src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072__340.jpg"
            alt="Bricks">
        <div class="image__overlay">
            <div class="image__title">Ocean</div>
            <p class="image__description">
                Enjoy the blue color of ocean.
            </p>
        </div>
    </div>

여기에 모든 요소의 상위 👨‍👧인 div 이미지가 있는 class가 있습니다. 그런 다음 이 div 내부에 이미지를 렌더링하기 위한 img 태그가 있습니다. 그 아래에는 div image__overlay가 있는 class가 있으며 이미지 위로 마우스를 가져가면 표시됩니다. 이 안에 오버레이에 표시하려는 이미지와 관련된 텍스트를 넣을 수 있습니다.

🤩 CSS로 실제 효과를 만들 수 있습니다.

여기에서 먼저 img 태그에 몇 가지 기본 스타일을 적용합니다. width 및 height 속성을 만들어 부모의 사용 가능한 전체 크기를 가져옵니다.

.image__img {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
}

부모 이미지 컨테이너position의 속성relative과 오버레이의 속성을 absolute로 만들어
이미지 컨테이너의 치수를 준수합니다. 그런 다음 오버레이의 top 및 left 속성을 0 으로 만들어 이미지 컨테이너의 왼쪽 상단에서 바로 시작하도록 합니다. width 및 height를 100%로 만들어 이미지 컨테이너의 전체 너비를 채우고 완전히 덮을 수 있도록 합니다. 이제 이 오버레이의 background 불투명도가 거의 없는 검은색으로 만들어 기본 이미지를 볼 수 있습니다. 또한 텍스트 스타일을 지정하기 위해 일부CSS를 추가할 것입니다. 그런 다음 부드러운 느낌이 들도록 오버레이에 transition를 추가합니다.

.image {
    position: relative;
    width: 30%;
}

.image__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-family: 'Quicksand', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s;
}

이제 가장 중요한 🛎️ 부분을 그대로 두면 처음부터 이미지에 오버레이가 있음을 알 수 있습니다. 하지만 이미지 위의 hover에만 나타나기를 원합니다. 따라서 처음에는 오버레이opacity를 0으로 설정하고 켜짐hover을 1로 설정합니다.

// at start
.image__overlay{
      opacity: 0;
}

// on hover
.image__overlay:hover {
    opacity: 1;
}

그게 다야 이미지 호버 텍스트 오버레이 효과 💪를 완성했습니다.
이 오버레이 효과를 수정하여 흐릿한 오버레이 또는 단색 오버레이를 사용할 수도 있습니다. 다음과 같은 간단한 클래스를 CSS 파일에 추가한 다음 HTML의 오버레이 div에 추가합니다.

.image__overlay--blur {
    backdrop-filter: blur(5px);
}

.image__overlay--solid {
    background: #c51f5d;
}

저것과 같이 쉬운. 그리고 우리는 이러한 작은 코드로 세 가지 멋진 CSS 호버 효과를 만들었습니다. 이것이 도움이 되길 바랍니다 😇.

첫 글입니다. 잘되길 바랍니다.

이 게시물이 마음에 들면 다음에서 더 많은 정보를 찾을 수 있습니다.

내 개인 블로그 방문: satishnaikawadi.me

읽어 주셔서 감사합니다!