728x90
SITE를 만들어봅시다 !
이미지 유형 세번째 방법 입니다.
구조가 바뀌면서 나중에 데이터를 불러오는 작업까지 생각하여 flex가 아닌 grid 방식으로 레이아웃을 구성하였습니다.
추가로 마우스 hover 효과를 넣어 아이콘이 뜨는 효과를 적용하였습니다.
1. CSS 살펴보기
<style>
...
/* reset */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
...
</style>
+ 웹 접근성을 위해 ir효과 추가
<style>
...
/* common */
.container-fluid {
width: 100%;
padding: 0 100px;
/* 스크롤 생기지 않도록 */
box-sizing: border-box;
}
...
</style>
+ 바뀐 구조에 맞춰 추가
<style>
...
/* imageType03 */
.image__inner {
display: grid;
grid-template-areas:
"box1 box1 box2 box3"
"box1 box1 box4 box5";
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
}
.image {
position: relative;
overflow: hidden;
}
.image__inner .image:nth-child(1) {
grid-area: box1;
background: url(img/image_bg03_01.jpg);
background-size: cover;
}
.image__inner .image:nth-child(2) {
grid-area: box2;
}
.image__inner .image:nth-child(3) {
grid-area: box3;
}
.image__inner .image:nth-child(4) {
grid-area: box4;
}
.image__inner .image:nth-child(5) {
grid-area: box5;
}
...
...
</style>
+ flex 구조가 아닌 grid 구조 적용
<style>
...
/* imageType03 */
...
.image__desc {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 16px;
box-sizing: border-box;
transition: all 0.4s ease;
color: #fff;
}
.image:hover .image__desc {
bottom: 65px;
}
.image__desc h3 {
font-size: 20px;
}
.image__desc p {
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(255, 255, 255, 0.7);
}
...
...
</style>
+ 이미지 설명 부분 설정과 이미지 오버 효과 설정
<style>
...
/* imageType03 */
...
.image__sns {
position: absolute;
right: 10px;
top: 10px;
opacity: -1;
transition: all 0.5s ease;
}
.image__sns a {
width: 36px;
height: 36px;
border-radius: 50%;
display: block;
margin-bottom: 5px;
background: url(img/image_bg03_icon3.svg) no-repeat;
}
.image__sns a:nth-child(2){
background-position: -50px 0;
}
.image__sns a:nth-child(3){
background-position: -100px 0;
}
.image__sns a:nth-child(4){
background-position: -150px 0;
}
.image:hover .image__sns {
opacity: 1;
}
...
...
</style>
+ 이미지 오른쪽 상단 아이콘을 설정해줍니다.
+ 이미지 스프라이트(image sprite), background 설정
+ hover : opacity 속성
<style>
...
/* imageType03 */
...
.image__save {
position: absolute;
left: 0;
bottom: -100%;
width: 100%;
background-color: rgba(0,0,0,0.25);
backdrop-filter: blur(10px);
padding: 16px;
box-sizing: border-box;
transition: all 0.4s ease;
}
.image__save a {
width: 36px;
height: 36px;
border-radius: 50%;
display: block;
float: left;
background: url(img/image_bg03_icon2.svg) no-repeat;
}
.image__save a:nth-child(2){
background-position: -50px 0;
margin-left: 10px;
}
.image__save a:nth-child(3){
background-position: -100px 0;
float: right;
margin-left: 10px;
}
.image__save a:nth-child(4){
background-position: -150px 0;
float: right;
}
.image:hover .image__save {
bottom: 0;
}
...
...
</style>
+ 이미지 오른쪽 하단 아이콘을 설정해줍니다.
+ 이미지 스프라이트(image sprite), background 설정
+ hover : 아래에서 올라오도록 설정
2. HTML 살펴보기
<body>
<section id="imgageType03" class="image__wrap kpw section">
<h2<Art Work Board</h2<
<p<
여러 디자이너들의 아트 작업 보드 입니다. 서로 공유하고 나누면서 시야를 넓혀봅시다.<br<
디자이너분들께 많은 관심 부탁드립니다.
</p<
<div class="image__inner container-fluid"<
<article class="image"<
<!-- <figure class="image__box">
<img src="img/image_bg03_01.jpg" alt="">
</figure> -->
<div class="image__desc">
<h3>Flow</h3>
<p>Design by 홍개미</p>
</div>
<div class="image__save">
<a class="link" href=""><span class="ir">저장하기</span></a>
<a class="link" href=""><span class="ir">더보기</span></a>
<a class="link" href=""><span class="ir">조회수</span></a>
<a class="link" href=""><span class="ir">공유횟수</span></a>
</div>
<div class="image__sns">
<a class="link" href=""><span class="ir">클라우드</span></a>
<a class="link" href=""><span class="ir">공유하기</span></a>
<a class="link" href=""><span class="ir">좋아요</span></a>
<a class="link" href=""><span class="ir">확대하기</span></a>
</div>
</article>
<article class="image">
<figure class="image__box">
<img src="img/image_bg03_02.jpg" alt="'아트작품'Waver'">
</figure>
<div class="image__desc">
<h3>Waver</h3>
<p>Design by 김배짱</p>
</div>
<div class="image__save">
<a class="link" href=""><span class="ir">저장하기</span></a>
<a class="link" href=""><span class="ir">더보기</span></a>
<a class="link" href=""><span class="ir">조회수</span></a>
<a class="link" href=""><span class="ir">공유횟수</span></a>
</div>
<div class="image__sns">
<a class="link" href=""><span class="ir">클라우드</span></a>
<a class="link" href=""><span class="ir">공유하기</span></a>
</div>
</article>
<article class="image">
<figure class="image__box">
<img src="img/image_bg03_03.jpg" alt="'아트작품'Spread'">
</figure>
<div class="image__desc">
<h3>Spread</h3>
<p>Design by 홍이젠</p>
</div>
<div class="image__save">
<a class="link" href=""><span class="ir">저장하기</span></a>
<a class="link" href=""><span class="ir">더보기</span></a>
<a class="link" href=""><span class="ir">조회수</span></a>
<a class="link" href=""><span class="ir">공유횟수</span></a>
</div>
<div class="image__sns">
<a class="link" href=""><span class="ir">클라우드</span></a>
<a class="link" href=""><span class="ir">공유하기</span></a>
</div>
</article>
<article class="image">
<figure class="image__box">
<img src="img/image_bg03_04.jpg" alt="'아트작품'Plastic'">
</figure>
<div class="image__desc">
<h3>Plastic</h3>
<p>Design by 구마고</p>
</div>
<div class="image__save">
<a class="link" href=""><span class="ir">저장하기</span></a>
<a class="link" href=""><span class="ir">더보기</span></a>
<a class="link" href=""><span class="ir">조회수</span></a>
<a class="link" href=""><span class="ir">공유횟수</span></a>
</div>
<div class="image__sns">
<a class="link" href=""><span class="ir">클라우드</span></a>
<a class="link" href=""><span class="ir">공유하기</span></a>
</div>
</article>
<article class="image">
<figure class="image__box">
<img src="img/image_bg03_05.jpg" alt="아트작품'brighten'">
</figure>
<div class="image__desc">
<h3>brighten</h3>
<p>Design by 자감</p>
</div>
<div class="image__save">
<a class="link" href=""><span class="ir">저장하기</span></a>
<a class="link" href=""><span class="ir">더보기</span></a>
<a class="link" href=""><span class="ir">조회수</span></a>
<a class="link" href=""><span class="ir">공유횟수</span></a>
</div>
<div class="image__sns">
<a class="link" href=""><span class="ir">클라우드</span></a>
<a class="link" href=""><span class="ir">공유하기</span></a>
</div>
</article>
</div>
</section>
</body>
3. 결과 확인하기
'SITE > IMAGE' 카테고리의 다른 글
| SITE | imageType #2 (2) | 2022.08.17 |
|---|---|
| SITE | imageType #1 (2) | 2022.08.17 |
댓글