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

사이트 만들기

이미지 유형02

---

Figma

일단 피그마를 이용해서 레이아웃의 틀을 잡아줍니다.

HTML 작성

<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/card_bg_02_01.jpg" alt="">
        </figure>
        <div class="image__desc">
            <h3>우측 사선형</h3>
            <a href="/" class="more" title="자세히보기" style="color: #fff;">자세히보기</a>
        </div>
    </article>
    <article class="image img2">
        <figure class="image__box">
            <img src="img/card_bg_02_02.jpg" alt="">
        </figure>
        <div class="image__desc">
            <h3>정면 시선형</h3>
            <a href="/" class="more" title="자세히보기" style="color: #fff;" >자세히보기</a>
        </div>
    </article>
    <article class="image img3">
        <figure class="image__box">
            <img src="img/card_bg_02_03.jpg" alt="">
        </figure>
        <div class="image__desc">
            <h3>얼짱 미녀형</h3>
            <a href="/" class="more" title="자세히보기" style="color: #fff;">자세히보기</a>
        </div>
    </article>
</div>
</section>

CSS 작성

이미지에 마우스 hover 효과를 넣어서 마우스를 위에 올리면 박스가 올라와서 보이고 평소에는 overflow hidden을 사용해 보이지 않게 설정했습니다.

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

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

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

}
a {
    text-decoration: none;
    color: #000;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
img {
    width: 100%;
}
/* common */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
    
}
.section {
    padding: 120px 0;
}
.section > h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}
.section > p {
    font-size: 20px;
    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 {}
.image__box img {
    vertical-align: top;
    transition: all 0.6s ease-in-out;

}
.image__desc {
    color: #fff;
    position: absolute;
    left: 0;
    bottom: -100px;
    width: 100%;
    text-align: center;
    backdrop-filter: blur(10px);
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
}
.image:hover .image__desc {
    bottom: 0;
}
.image:hover .image__box img {
    transform: scale(1.03);
}

.img1 .image__desc {
    background: rgba(148,122,122,40%);
}
.img2 .image__desc {
    background: rgba(69,15,15,50%);
}
.img3 .image__desc {
    background: rgba(149,125,125,60%);
}
.image__desc h3 {
    font-size: 24px;
    margin-bottom: 5px;
}
.image__desc .more {
    font-size: 16px;
}
.image__desc .more:hover {
    text-decoration: underline;
}

결과

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

---