티스토리 뷰

HTML , CSS , JS

Hover 효과를 이용한 진격의거인 인물페이지 만들기

플레지 2019. 6. 7. 10:27

190429 기준 진격의 거인 3기 2 쿨이 시작되었습니다. 대박.. 이에 여기에서 감명받고 얼마 전에 유튜브에서 공부한 hover를 응용하여 페이지를 만들어보겠습니다. 처음에는 인간일 때 모습을 보여주고 마우스가 올라갔을 때 해당하는 거인으로 변신한 모습이 보이도록 해주겠습니다.

HTML

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
        
            <header>
                    <h1> Attack on Titan</h1>
                </header>
 
    
 
            <section id="outline">
 
 
                    <div class="member">
 
                        <div class="img1"></div>
 
                            <div class="name">
                                <p> Annie Leonhart </p>
                             </div>
 
                                <div class="content">
                                    <h1> Attack on Ani</h1>
                                    <p>
Attack on Titan (Japanese: 進撃の巨人 Hepburn: Shingeki no Kyojin, lit. "Attack of Giants") is a Japanese manga series both written and illustrated by Hajime Isayama. The series first began in Kodansha's Bessatsu Shōnen Magazine on September 9, 2009, and it has been collected into 28 tankōbon volumes as of April 2019. It is set in a world where humanity lives in cities surrounded by enormous walls that protect the humans from gigantic man-eating humanoids referred to as titans.
                                    </p>
                                </div>
                    </div>
 
 
 
                    <div class="member">
                        
                        <div class="img2"></div>
 
                            <div class="name">
                                <p> Eren Yeager </p>
                             </div>
 
                                <div class="content">
                                    <h1> Attack on Aren</h1>
                                    <p>
Attack on Titan (Japanese: 進撃の巨人 Hepburn: Shingeki no Kyojin, lit. "Attack of Giants") is a Japanese manga series both written and illustrated by Hajime Isayama. The series first began in Kodansha's Bessatsu Shōnen Magazine on September 9, 2009, and it has been collected into 28 tankōbon volumes as of April 2019. It is set in a world where humanity lives in cities surrounded by enormous walls that protect the humans from gigantic man-eating humanoids referred to as titans.
                                    </p>
                                </div>
                    </div>
 
 
 
 
                                        <div class="member">
                        
                        <div class="img3"></div>
 
                            <div class="name">
                                <p>Armin Arlert</p>
                             </div>
 
                                <div class="content">
                                    <h1> Attack on Armin</h1>
                                    <p>
Attack on Titan (Japanese: 進撃の巨人 Hepburn: Shingeki no Kyojin, lit. "Attack of Giants") is a Japanese manga series both written and illustrated by Hajime Isayama. The series first began in Kodansha's Bessatsu Shōnen Magazine on September 9, 2009, and it has been collected into 28 tankōbon volumes as of April 2019. It is set in a world where humanity lives in cities surrounded by enormous walls that protect the humans from gigantic man-eating humanoids referred to as titans.
                                    </p>
                                </div>
                    </div>
 
 
 
 
                                        <div class="member">
                        
                        <div class="img4"></div>
 
                            <div class="name">
                                <p> Mikasa Ackerman</p>
                             </div>
 
                                <div class="content">
                                    <h1> Attack on Mikasa</h1>
                                    <p>
Attack on Titan (Japanese: 進撃の巨人 Hepburn: Shingeki no Kyojin, lit. "Attack of Giants") is a Japanese manga series both written and illustrated by Hajime Isayama. The series first began in Kodansha's Bessatsu Shōnen Magazine on September 9, 2009, and it has been collected into 28 tankōbon volumes as of April 2019. It is set in a world where humanity lives in cities surrounded by enormous walls that protect the humans from gigantic man-eating humanoids referred to as titans.
                                    </p>
                                </div>
                    </div>
            </section>
  </body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
  

 

css

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
*{
padding: 0;
margin: 0;
}
 
header{
position: absolute;
top:0;
right: 0;
width: 40%;
text-align: center;
background-image: url(wall.jpg);
background-size: cover;
background-position: center center;
height: 100vh;
font-family: tahoma;
}
 
 
 
body{
background: rgba(232, 46, 31,0.9);
}
 
#outline{
    display: flex;
    height: 100vh;
    width: 90%; 
    position: relative;
}
 
 
.img1, .img2 ,.img3, .img4{
    position: absolute;
    background-position: center center;
    background-size: cover;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 2s ease 1s;
    filter: grayscale(50%);
 
}
 
 
.img1{
    background-image: url("Ani.jpg");
}
 
.img2{
    background-image: url("Aren.jpg");
}
 
.img3{
    background-image: url("Armin.jpg");
}
 
.img4{
    background-image: url("Mikasa.jpg");
}
 
 
.member:hover .img1{
    filter: grayscale(0);
    background-image: url("w.jpg");
}
 
.member:hover .img2{
    filter: grayscale(0);
    background-image: url("a.jpg");
}
.member:hover .img3{
    filter: grayscale(0);
            background-position: 0 center;
}
 
.member:hover .img4{
    filter: grayscale(0);
    background-image: url("https://t1.daumcdn.net/cfile/tistory/22305C38537869CB1F");
}
 
 
.member{
    position: relative;
    width: 16.7%;
    overflow: hidden;
    transition:  all 1s;
}
 
 
 .member::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0 ;
    left: 0;
}
 
.member::after{
    background: rgba(232, 46, 31,0.7);
    opacity: 1;
    transition: all 1s;
}
 
.member:hover::after{
    background: linear-gradient(to Top, rgba(0,0,0,1) 10% , transparent 75%);
}
 
.member:hover{
    width: 60% !important;
}
 
 
.content{
    transform: translateY(20px);
    position: absolute;
    z-index: 1;
    text-align: center;
    margin: 0 1.2em;
    bottom:15%;
    opacity: 0;
    color: #FFF;
}
 
.member:hover .content{
    opacity: 1;
    transform: translateY(0);
    transition: all 1s ease 1s; 
}
 
 
.content h1{
    font-family: tahoma;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: bold;
}
 
.name{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: 1;
    color: #FFF;
    transition: all 0.7s ease 1s; 
    visibility: hidden;
    opacity: 0;
    font-family: tahoma;
}
 
.member:hover .name{
    font-size: 2rem;
    visibility: visible;
    opacity: 1;
    margin-bottom: 20px;
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
  

<!--  flex 개념이 조금씩 잡히고 있다. 다음에는 javascript 를 추가해서 구성해보아야겠다. -->

저작자표시

'HTML , CSS , JS' 카테고리의 다른 글

HTML 태그 이름(tag name)을 이용한 선택  (0) 2019.06.08
Document 에 접근하기 (Dom)  (0) 2019.06.08
Hover 를 이용한 칵테일 느낌 페이지 만들기  (0) 2019.06.02
사이드바와 checkbox 를 이용한 페이지 만들기2  (0) 2019.06.02
사이드바와 checkbox 를 이용한 페이지 만들기  (0) 2019.06.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
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
글 보관함