이미지 유형 02

728x90

이미지 유형 02

1번과 마찬가지로 이미지 않에 글자가 있으며, background biur 효과를 주었다. 마우스를 갖다대면 블라인더 효과가 올라온다.

HTML

&ltsection id="imageType02" class="image__wrap  section gmarket ">
    &lth2>북극 동물들
    &ltp>북극동물들 의 귀여움을 알아보자.
    &ltdiv class="image__inner container">
        &ltarticle class="image img1">
            &ltfigure class="image__box">
                &ltimg src="img/imgType02_1.jpg" alt="/">
            &lt/figure>
            &ltdiv class="imge__desc">
                &lth3>북극동물
                &lta href="/" class="more" title="자세히보기">자세히보기
            &lt/div>
        &lt/article>
        &ltarticle class="image img1">
            &ltfigure class="image__box">
                &ltimg src="img/imgType02_2.jpg" alt="/">
            &lt/figure>
            &ltdiv class="imge__desc">
                &lth3>북극동물
                &lta href="/" class="more" title="자세히보기">자세히보기
            &lt/div>
        &lt/article>
        &ltarticle class="image img1">
            &ltfigure class="image__box">
                &ltimg src="img/imgType02_3.jpg" alt="/">
            &lt/figure>
            &ltdiv class="imge__desc">
                &lth3>북극동물
                &lta href="/" class="more" title="자세히보기">자세히보기
            &lt/div>
        &lt/article>
    &lt/div>
&lt/section>

CSS

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

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

/* 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;
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: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
.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;
}
.imge__desc {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
backdrop-filter: blur(10px );
padding: 23px 20px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
bottom: -100px;
transition: all 0.3s ease-in-out;
}
.imge__desc h3 {
font-size: 24px;
margin-bottom: 5px;
}
.img1 .imge__desc{ background: rgba(0, 0, 0, 0.1);}
.img2 .imge__desc{ background: rgba(0, 0, 0, 0.1);}
.img3 .imge__desc{ background: rgba(0, 0, 0, 0.1);}
.img1 .imge__desc h3 { color: #000;}
.img2 .imge__desc h3 { color: #000;}
.img3 .imge__desc h3 { color: #000;}
.img1 .imge__desc.more{ color: #055977;}
.img2 .imge__desc.more{ color: #7E88A0;}
.img3 .imge__desc.more{ color: #8A6071;}

.img1:hover .imge__desc {
bottom: 0;
}
.img1:hover .imge__box img {
transform: scale(1.03);
}
.imge__desc .more {
font-size: 16px;
}
.imge__desc .more:hover {
text-decoration: underline;
}