사이트 만들기 (이미지 유형 - 02)

사이트 만들기(이미지 유형 - 02)

이미지가 삽입된 형식의 사이트를 만들 수 있습니다.

---

---

CSS

/* imageType */
.image__inner {
    display: flex;
    justify-content: space-between;
}
.image {
    width: 32%;
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
}
.image__box img {
    vertical-align: top;
    transition: all 0.5s ease-in-out;
}
.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;
    background: rgba(266, 56, 59, 0.1);
    color: #fff;
    transition: all 0.3s ease-in-out;
}
.image:hover .image__desc {
    bottom: 0;
}
.image:hover .image__box img {
    transform: scale(1.03);
}
.image1 .image__desc { background-color: rgba(18, 101, 140, 0.5);}
.image2 .image__desc {background-color: rgba(5, 94, 85, 0.5);}
.image3 .image__desc { background-color: rgba(72, 110, 134, 0.5);}
    

.image__desc h3 {
    font-size: 24px;
    margin-bottom: 5px;
}
.image__desc .more {
    font-size: 16px;
    color: #fff;
}
.image__desc .more:hover {
    text-decoration: underline;
}

backdrop-filter: blur(10px);

배경의 블러 효과를 줄 수 있습니다.

overflow: hidden;

overflow: hidden을 이용해 밖으로 나온 박스를 숨겨 줍니다.

HTML

<section id="imageType01" class="image__wrap nexon section">
    <h2>새의 이야기</h2>
    <p>다양한 새들의 이야기를 알아보는 좋은시간 됩시다.</p>
    <div class="image__inner container">
        <article class="image image1">
            <figure class="image__box">
                <img src="img/imageType02_01.jpg" alt="앵무새">
            </figure>
            <div class="image__desc">
                <h3>첫번째 - 앵무새</h3>
                <a href="/" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
        <article class="image image2">
            <figure class="image__box">
                <img src="img/imageType02_02.jpg" alt="앵무새">
            </figure>
            <div class="image__desc">
                <h3>두번째 - 울새</h3>
                <a href="/" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
        <article class="image image3">
            <figure class="image__box">
                <img src="img/imageType02_03.jpg" alt="앵무새">
            </figure>
            <div class="image__desc">
                <h3>세번째 - 홍학</h3>
                <a href="/" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
    </div>   
</section>

결과

---

원본 소스 보기 페이지 보기