Imge type 02

Imge type 02

피그마에서 디자인 하여, zeplin을 참고해 만든 이미지 타입 사이트 입니다. 아래는 피그마를 이용해 먼저 디자인 하였습니다.

이후 코드로 작성하였습니다.

HTML

카드들은 컨테이너를 부여해 display : flex 를 주기 쉽게 하였습니다.

 <section id="imageType02" class="image__wrap gmarket section">
    <h1>해파리의 떠다니는 모습들</h1>
    <p>투명한 해파리들이 다채로운 바다상에서 깊게 유영하고 다니며 영롱한 색상을 드러내고 있어요</p>
    <div class="image__inner container">
        <article class="image img1">
            <figure class="image__box">
                <img src="img/imgType02_01.jpg" alt="북극곰">
            </figure>
            <div class="image__desc">
                <h3>파란색 해파리</h3>
                <a href="/" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
        <article class="image img2">
            <figure class="image__box">
                <img src="img/imgType02_02.jpg" alt="북극곰">
            </figure>
            <div class="image__desc">
                <h3>보라색 해파리</h3>
                <a href="/" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
        <article class="image img3">
            <figure class="image__box">
                <img src="img/imgType02_03.jpg" alt="북극곰">
            </figure>
            <div class="image__desc">
                <h3>투명한 해파리</h3>
                <a href="/" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
    </div>
</section> 

CSS

공통 요소

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

    .nexon {
        font-family: 'NexonLv1Gothic';
        font-weight: 400;
    }

    /* reset */
    * {
        margin: 0;
        padding: 0;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }

    img {
        width: 100%;
    }

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

    /* common */
    .container {
        width: 1160px;
        padding: 0 20px;
        margin: 0 auto;
        min-width: 1160px;
        display: flex;
        justify-content: space-between;
    }
    .section {
        padding: 120px 0;
    }
    .section > h2 {         /*  ㅣ+ 형제요소 ㅣ > 자식요소(첫번째)  */
        font-size: 50px;
        line-height: 1;
        text-align: center;
        margin-bottom: 20px;
    }

    .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 {
        height: 100%;
    }
    .image__box img {
        transition: all 0.5s ease-in-out;
    }
    .image__desc {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;     /* image__desc 박스 안넘치게 하기 */
        backdrop-filter: blur(10px);
        transition: all 0.3s ease-in-out;
    }
    .img1 .image__desc {
        background-color: #052b6469;
    }
    .image__desc h3 {
        color: #fff;
    }
    .image__desc .more {
        color: #fff;
    }
    .img2 .image__desc {
        background-color: #2c217360;
    }
    
    .img3 .image__desc {
        background-color: #111d2e62;
    }
    
    .img1 .image__desc {
        bottom: -100px;
    }
    .img1:hover .image__desc {
        bottom: 0;
    }
    .img2 .image__desc {
        bottom: -100px;
    }
    .img2:hover .image__desc {
        bottom: 0;
    }
    .img3 .image__desc {
        bottom: -100px;
    }
    .img3:hover .image__desc {
        bottom: 0;
    }
    .image:hover .image__box img {
        transform: scale(1.05);
    }
    .image__desc h3 {
        font-size: 24px;
        margin-bottom: 5px;
    }
    .image__desc .more {
        font-size: 16px;
        font-weight: 300;
    }
    .image__desc .more:hover {
        text-decoration: underline;
    } 

원본 소스 보여주기

원본 사이트 보여주기