이미지 유형02

사이트 만들기 : 이미지 유형2

3개의 마우스오버 설정이 적용된 이미지 유형입니다.

HTML

3개의 article 영역과, 이미지 유형 1번과 다르게 html에 직접적으로 img태그를 넣어 이미지를 삽입하였습니다.

<section id="imageType02" class="image__wrap gmark section">
    <h2>고슴도치</h2>
    <p>고슴도치의 가시는 주인도 찌를 수 있으니 항상 조심해야해요!</p>
    <div class="image__inner container">
        <article class="image img1">
            <figure class="image__box">
                <img src="img/img_bg02_01.jpg" alt="Hedge">
            </figure>
            <div class="image__desc">
                <h3 class="image__tit">고슴도치 1기 동동일</h3>
                <a href="/" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>

        <article class="image img2">
            <figure class="image__box">
                <img src="img/img_bg02_02.jpg" alt="Hedge">
            </figure>
            <div class="image__desc">
                <h3 class="image__tit">고슴도치 2기 동동이</h3>
                <a href="/" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
        <article class="image img3">
            <figure class="image__box">
                <img src="img/img_bg02_03.jpg" alt="Hedge">
            </figure>
            <div class="image__desc">
                <h3 class="image__tit">고슴도치 3기 동동삼</h3>
                <a href="/" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
    </div>
</section>

CSS

이번 이미지 유형은 마우스 오버 효과를 넣어 이미지 위에 마우스를 올려놓으면, 이미지 설명과 자세히 보기 텍스트가 안으로 천천히 나타나도록 설정하였습니다.
이미지 또한, 마우스 오버시 천천히 확대되도록 transform, transition 속성을 사용하여 설정하였습니다.
텍스트 박스에 blur 효과를 주어 좀 더 감각적인 디자인이 되도록 하였습니다.

/* imageType */
.image__inner {
    display: flex;
    justify-content: space-between;
}

.image {
    width: 32%;
    position: relative;
    overflow: hidden;   // 이미지 밖의 컨텐츠들이 보이지 않도록 설정
}

.image__box {}

.image__box img {
    vertical-align: top;
}

.img1 .image__desc {
    background: rgba(136, 200, 104, 0.1);
    color: rgba(33, 111, 0, 1);
}

.img2 .image__desc {
    background: rgba(17, 15, 7, 0.1);
    color: rgba(88, 61, 0, 1);
}

.img3 .image__desc {
    background: rgba(38, 42, 45, 0.1);
    color: rgba(0, 84, 147, 1)
}

.img1 .image__desc .more {
    color: rgba(33, 111, 0, 1);
}

.img2 .image__desc .more {
    color: rgba(88, 61, 0, 1);
}

.img3 .image__desc .more {
    color: rgba(0, 84, 147, 1)
}

.image__desc {
    position: absolute;
    left: 0;
    bottom: -100px;
    width: 100%;
    height: 100px;
    text-align: center;
    backdrop-filter: blur(10px);    //텍스트영역 투명화 처리
    padding: 23px 20px;
    box-sizing: border-box;
    transition: all 0.3s ease-in;   //텍스트 영역 등장 속도
}

.image:hover .image__desc {
    bottom: 0;
}

.image:hover .image__box img{
    transform: scale(1.03);     //이미지 확대 크기
    transition: all 0.6s ease-in;   //확대 속도
}

.image__desc h3 {
    font-size: 24px;
    margin-bottom: 5px;
}

.image__desc .more {
    font-size: 16px;
}

.image__desc .more:hover {
    text-decoration: underline;
}

원본 소스 보기 원본 사이트 보기

반응형

'Site 만들기 > Image 유형' 카테고리의 다른 글

이미지 유형03  (6)	2022.08.20
이미지 유형01  (2)	2022.08.17