728x90
SITE를 만들어봅시다 !
우리가 평소에 자주 볼 수 있는 사이트를 생각해보면 수많은 레이아웃과 유형들로 이루어져 있음을 알 수 있습니다.
오늘은 그 중에서도 이미지 유형 두번째 방법을 배워봅시다.
1. CSS 살펴보기
<style>
/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmark {
font-family: "GmarketSans";
font-weight: 500;
}
/* reset */
* {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
a {
text-decoration: none;
color: #000;
}
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: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* imageType02 */
.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 {
position: absolute;
left: 0;
bottom: -100px;
width: 100%;
text-align: center;
backdrop-filter: blur(10px);
padding: 23px 20px;
box-sizing: border-box;
/* 움직임 속도 조절 */
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(123, 106, 188, 0.5);}
.img2 .image__desc {background: rgba(201, 201, 201, 0.5);}
.img3 .image__desc {background: rgba(234, 200, 103, 0.5);}
.img1 .image__desc h3 {color: rgba(181, 181, 181);}
.img2 .image__desc h3 {color: #3F3F3F;}
.img3 .image__desc h3 {color: #564310;}
.image__desc h3 {
font-size: 24px;
margin-bottom: 5px;
}
.image__desc .more {
font-size: 16px;
}
.image__desc .more:hover {
text-decoration: underline;
}
</style>
#1. transition-timing-function 속성
| 속성값 | 의미 |
|---|---|
| linear | 전환 효과가 처음부터 끝까지 일정한 속도로 진행 |
| ease | 기본값; 전환 효과가 천천히 시작되고 빨라졌다가 다시 느려짐 |
| ease-in | 전환 효과가 천천히 시작 |
| ease-out | 전환 효과가 천천히 끝남 |
| ease-in-out | 전환 효과가 천천히 시작되어 천천히 끝남 |
| cubic-bezier(n,n,n,n) | 전환 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행 |
.image:hover .image__desc {
bottom: 0;
}
.image:hover .image__box img {
transform: scale(1.03);
}
#2. 이미지에 hover 효과를 주어 마우스를 갖다 대면 설정해준 효과가 나오게 설정해줍니다.
2. HTML 살펴보기
<body>
<section id="imgageType02" class="image__wrap gmark section">
<h2>Photographic Work</h2>
<p>다양한 컨셉 디자인으로 작업한 사진 포트폴리오 입니다. 모델 정보는 문의 남겨주세요.</p>
<div class="image__inner container">
<article class="image img1">
<figure class="image__box">
<img src="img/image_bg02_01.jpg" alt="이미지1">
</figure>
<div class="image__desc">
<h3>Photographer #1</h3>
<a href="/" class="more" title="자세히 보기">자세히 보기</a>
</div>
</article>
<article class="image img2">
<figure class="image__box">
<img src="img/image_bg02_02.jpg" alt="이미지2">
</figure>
<div class="image__desc">
<h3>Photographer #2</h3>
<a href="/" class="more" title="자세히 보기">자세히 보기</a>
</div>
</article>
<article class="image img3">
<figure class="image__box">
<img src="img/image_bg02_03.jpg" alt="이미지3">
</figure>
<div class="image__desc">
<h3>Photographer #3</h3>
<a href="/" class="more" title="자세히 보기">자세히 보기</a>
</div>
</article>
</div>
</section>
</body>
#1. img는 <figure> 태그로 감싸 구분지어줍니다.
3. 결과 확인하기
'SITE > IMAGE' 카테고리의 다른 글
| SITE | imageType #3 (7) | 2022.08.20 |
|---|---|
| SITE | imageType #1 (2) | 2022.08.17 |
댓글