- html
container > card*3
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<div class="container">
<div class="card">
<img src="img/crew/crew-01.jpg" alt="">
<div class="content">
<h2>
Andrew Yu
<span>Developer</span>
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Excepturi harum aperiam eius ad deserunt sed!
</p>
<div class="sns">
<a href="#none">
<i class="fa fa-facebook"></i>
</a>
<a href="#none">
<i class="fa fa-twitter"></i>
</a>
<a href="#none">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
</div>
<div class="card">
<img src="img/crew/crew-02.jpg" alt="">
<div class="content">
<h2>
Monica Jung
<span>Designer</span>
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Excepturi harum aperiam eius ad deserunt sed!
</p>
<div class="sns">
<a href="#none">
<i class="fa fa-facebook"></i>
</a>
<a href="#none">
<i class="fa fa-twitter"></i>
</a>
<a href="#none">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
</div>
<div class="card">
<img src="img/crew/crew-03.jpg" alt="">
<div class="content">
<h2>
James Lee
<span>Planner</span>
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Excepturi harum aperiam eius ad deserunt sed!
</p>
<div class="sns">
<a href="#none">
<i class="fa fa-facebook"></i>
</a>
<a href="#none">
<i class="fa fa-twitter"></i>
</a>
<a href="#none">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
</div>
</div>
|
cs |
- css
container (중앙정렬 : 포지션 absolute, left50% top50%, 트랜스폼 트랜스레이트(-50%, -50%) 또는 flex
> card(가로배치 - 인라인블럭)
hover 시 linear-gradient() 된 자식요소가 나옴
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
/* card.css */
.container {
/* 중앙정렬 */ display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.card {
position: relative;
margin: 10px;
width: 300px;
height: 400px;
overflow: hidden;
transition: .5s;
}
.card .content {
position: absolute;
top: 100%;
left: 0;
padding: 20px;
padding-top: 150px;
box-sizing: border-box;
width: inherit;
height: inherit;
color: #fff;
text-align: center;
transition: .5s;
}
/* .card .content:nth-child(1) X
-> card가 3개이고 card안에 .content는 한개있음 아래 crimson 불투명, 위 투명 (to top) */ .card:nth-child(1) .content {
background: linear-gradient(to top, crimson, transparent);
}
.card:nth-child(2) .content {
background: linear-gradient(to top, dodgerblue, transparent);
}
.card:nth-child(3) .content {
background: linear-gradient(to top, yellowgreen, transparent);
}
.card .content h2 {
font-size: 30px;
}
.card .content h2 span {
display: block;
font-size: 14px;
color: gold;
margin-top: 10px;
}
.sns a {
color: #fff;
display: inline-block;
border: 1px solid #fff;
border-radius: 50%;
width: 20px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
}
.card:hover .content {
top: 0;
}
.card:hover {
transform: translateY(-20px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.205);
}
|
cs |
|
|
'Web > HTML CSS 퍼블리싱' 카테고리의 다른 글
| login form #1 (0) | 2021.07.08 |
|---|---|
| full screen 검색창 (0) | 2021.07.06 |
| custom checkbox #2 커스텀 라디오 버튼, 체크박스 (폰트어썸 아이콘) (0) | 2021.07.04 |
| custom checkbox #1 배경이미지 사용 (0) | 2021.07.01 |
| before after 가상클래스 #3 호버이펙트 - rotate (0) | 2021.07.01 |