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
|
@tailwind base;
@tailwind components;
@tailwind utilities;
/* debug class *//*
* {
border: 1px solid red;
}
*/
@layer components {
.gameCard {
aspect-ratio: 5/7;
width: 18.75em; /*300px;*/
perspective: 2500px;
@apply relative flex justify-center items-end;
}
.gameCardCoverImg {
@apply w-full h-full object-cover rounded-md;
}
.gameCardWrapper {
transition: all 0.5s;
z-index: -1;
box-shadow: -15px 15px 32px -8px rgba(0, 0, 0, 0.75);
@apply absolute w-full h-full rounded-md;
}
.gameCard:hover .gameCardWrapper {
transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
box-shadow: -10px 35px 32px -8px rgba(0, 0, 0, 0.75);
}
.gameCardWrapper::before,
.gameCardWrapper::after {
content: "";
transition: all 0.5s;
@apply opacity-0 w-full h-20 absolute left-0 rounded-md;
}
.gameCardWrapper::before {
background-image: linear-gradient(
to top,
transparent 46%,
rgba(12, 13, 19, 0.5) 68%,
rgba(12, 13, 19) 97%
);
@apply top-0 h-full rounded-md;
}
.gameCardWrapper::after {
background-image: linear-gradient(
to bottom,
transparent 46%,
rgba(12, 13, 19, 0.5) 68%,
rgba(12, 13, 19) 97%
);
@apply bottom-0 opacity-100 rounded-md;
}
.gameCard:hover .gameCardWrapper::before,
.gameCardWrapper::after {
@apply opacity-100;
}
.gameTitleImg {
padding: 5%;
transition: transform 0.5s;
@apply w-full max-h-40 object-contain;
}
.gameCard:hover .gameTitleImg {
transform: translate3d(0%, -50px, 100px);
}
.gameCharacterImg {
transition: all 0.5s;
z-index: -1;
@apply w-full max-h-80 object-contain opacity-0 absolute;
}
.gameCard:hover .gameCharacterImg {
transform: translate3d(0%, -30%, 100px);
@apply opacity-100;
}
}
|
