웹사이트 만들기 : 이미지 유형 레이아웃02

레이아웃 : 이미지 유형02

다음과 같은 이미지 유형의 레이아웃을 작업해 보도록 하겠습니다. 이번에는 이미지가 총 세 개이며, 이미지 위에 마우스를 hover하면 '자세히 보기' 버튼이 나타나는 CSS 요소도 추가하였습니다.

HTML 소스

먼저, 세 개의 article 태그를 만들어 각각 이미지를 첨부해 주었습니다. article 태그 안에서도 image 부분과 desc 부분을 나누어 작업해 주었습니다.

<section id="imageType02" class="card__wrap gmark section">
    <h2>바다에 사는 생물들</h2>
    <p>바다에는 어떤 생물들이 살고 있을까요?</p>
    <div class="image__inner container">
        <article class="image img1">
            <figure class="image__box">
                <img src="img/img02_bg01.jpg" alt="불가사리">
            </figure>
            <div class="image__desc">
                <h3>TTUNG-E</h3>
                <a href="/" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
        <article class="image img2">
            <figure class="image__box">
                <img src="img/img02_bg02.jpg" alt="문어">
            </figure>
            <div class="image__desc">
                <h3 class="white">JingJing-E</h3>
                <a href="/" class="more white" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
        <article class="image img3">
            <figure class="image__box">
                <img src="img/img02_bg03.jpg" alt="게">
            </figure>
            <div class="image__desc">
                <h3>Jibgeo-Sajang</h3>
                <a href="/" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
    </div>
</section>

CSS 소스

폰트는 지마켓 산스를 사용하였고, display: flex를 이용하여 세 개의 이미지를 가로로 배치하였습니다. overflow-hidden을 이용하여 desc 박스가 보이지 않게 만들고, image에 마우스가 hover되었을 때 image가 애니메이션 효과를 보이며 확대되고, desc 박스가 아래에서 위로 나타나게끔 작업해 주었습니다.

/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');

.gmark {
    font-family: 'GmarketSans';
    font-weight: 500;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #000;
}

img {
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

/* common */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
}

.section {
    padding: 120px 0;
}

.section>h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 10px;
}

.section>p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}

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

.image {
    width: 32%;
    position: relative;
    overflow: hidden;
}

.image__box img {
    vertical-align: top;
    height: 100%;
}

.image__desc {
    position: absolute;
    left: 0;
    bottom: -100px;
    transition: all 0.3s ease-in-out;
    width: 100%;
    text-align: center;
    height: 100px;
    backdrop-filter: blur(4px);
    padding: 25px 20px;
    box-sizing: border-box;
}

.img1 .image__desc {
    background: rgba(190, 163, 112, 0.1);
}

.img2 .image__desc {
    background: rgba(95, 35, 32, 0.1);
}

.img3 .image__desc {
    background: rgba(142, 141, 141, 0.1);
}

.img1 .image__desc h3 {
    color: white;
}

.img2 .image__desc h3 {
    color: white;
}

.img1 .image__desc .more {
    color: white;
}

.img2 .image__desc .more {
    color: white;
}

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

.image:hover .image__box img {
    transform: scale(1.03);
    transition: all 0.6s ease-in-out;
}

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

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

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

결과

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