Card by kennyotsu

#212121

1/*works janky on mobile :<*/
2.container {
3  position: relative;
4  width: 190px;
5  height: 254px;
6  transition: 200ms;
7}
8
9.container:active {
10  width: 180px;
11  height: 245px;
12}
13
14#card {
15  position: absolute;
16  inset: 0;
17  z-index: 0;
18  display: flex;
19  justify-content: center;
20  align-items: center;
21  border-radius: 20px;
22  transition: 700ms;
23  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
24}
25
26.subtitle {
27  transform: translateY(160px);
28  color: rgb(134, 110, 221);
29  text-align: center;
30  width: 100%;
31}
32
33.title {
34  opacity: 0;
35  transition-duration: 300ms;
36  transition-timing-function: ease-in-out-out;
37  transition-delay: 100ms;
38  position: absolute;
39  font-size: x-large;
40  font-weight: bold;
41  color: white;
42}
43
44.tracker:hover ~ #card .title {
45  opacity: 1;
46}
47
48#prompt {
49  bottom: 8px;
50  left: 12px;
51  z-index: 20;
52  font-size: 20px;
53  font-weight: bold;
54  transition: 300ms ease-in-out-out;
55  position: absolute;
56  max-width: 110px;
57  color: rgb(255, 255, 255);
58}
59
60.tracker {
61  position: absolute;
62  z-index: 200;
63  width: 100%;
64  height: 100%;
65}
66
67.tracker:hover {
68  cursor: pointer;
69}
70
71.tracker:hover ~ #card #prompt {
72  opacity: 0;
73}
74
75.tracker:hover ~ #card {
76  transition: 300ms;
77  filter: brightness(1.1);
78}
79
80.container:hover #card::before {
81  transition: 200ms;
82  content: '';
83  opacity: 80%;
84}
85
86.canvas {
87  perspective: 800px;
88  inset: 0;
89  z-index: 200;
90  position: absolute;
91  display: grid;
92  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
93  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
94  gap: 0px 0px;
95  grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5"
96    "tr-6 tr-7 tr-8 tr-9 tr-10"
97    "tr-11 tr-12 tr-13 tr-14 tr-15"
98    "tr-16 tr-17 tr-18 tr-19 tr-20"
99    "tr-21 tr-22 tr-23 tr-24 tr-25";
100}
101
102#card::before {
103  content: '';
104  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
105  filter: blur(2rem);
106  opacity: 30%;
107  width: 100%;
108  height: 100%;
109  position: absolute;
110  z-index: -1;
111  transition: 200ms;
112}
113
114.tr-1 {
115  grid-area: tr-1;
116}
117
118.tr-2 {
119  grid-area: tr-2;
120}
121
122.tr-3 {
123  grid-area: tr-3;
124}
125
126.tr-4 {
127  grid-area: tr-4;
128}
129
130.tr-5 {
131  grid-area: tr-5;
132}
133
134.tr-6 {
135  grid-area: tr-6;
136}
137
138.tr-7 {
139  grid-area: tr-7;
140}
141
142.tr-8 {
143  grid-area: tr-8;
144}
145
146.tr-9 {
147  grid-area: tr-9;
148}
149
150.tr-10 {
151  grid-area: tr-10;
152}
153
154.tr-11 {
155  grid-area: tr-11;
156}
157
158.tr-12 {
159  grid-area: tr-12;
160}
161
162.tr-13 {
163  grid-area: tr-13;
164}
165
166.tr-14 {
167  grid-area: tr-14;
168}
169
170.tr-15 {
171  grid-area: tr-15;
172}
173
174.tr-16 {
175  grid-area: tr-16;
176}
177
178.tr-17 {
179  grid-area: tr-17;
180}
181
182.tr-18 {
183  grid-area: tr-18;
184}
185
186.tr-19 {
187  grid-area: tr-19;
188}
189
190.tr-20 {
191  grid-area: tr-20;
192}
193
194.tr-21 {
195  grid-area: tr-21;
196}
197
198.tr-22 {
199  grid-area: tr-22;
200}
201
202.tr-23 {
203  grid-area: tr-23;
204}
205
206.tr-24 {
207  grid-area: tr-24;
208}
209
210.tr-25 {
211  grid-area: tr-25;
212}
213
214.tr-1:hover ~ #card {
215  transition: 125ms ease-in-out;
216  transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
217}
218
219.tr-2:hover ~ #card {
220  transition: 125ms ease-in-out;
221  transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
222}
223
224.tr-3:hover ~ #card {
225  transition: 125ms ease-in-out;
226  transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
227}
228
229.tr-4:hover ~ #card {
230  transition: 125ms ease-in-out;
231  transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
232}
233
234.tr-5:hover ~ #card {
235  transition: 125ms ease-in-out;
236  transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
237}
238
239.tr-6:hover ~ #card {
240  transition: 125ms ease-in-out;
241  transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
242}
243
244.tr-7:hover ~ #card {
245  transition: 125ms ease-in-out;
246  transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
247}
248
249.tr-8:hover ~ #card {
250  transition: 125ms ease-in-out;
251  transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
252}
253
254.tr-9:hover ~ #card {
255  transition: 125ms ease-in-out;
256  transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
257}
258
259.tr-10:hover ~ #card {
260  transition: 125ms ease-in-out;
261  transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
262}
263
264.tr-11:hover ~ #card {
265  transition: 125ms ease-in-out;
266  transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
267}
268
269.tr-12:hover ~ #card {
270  transition: 125ms ease-in-out;
271  transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
272}
273
274.tr-13:hover ~ #card {
275  transition: 125ms ease-in-out;
276  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
277}
278
279.tr-14:hover ~ #card {
280  transition: 125ms ease-in-out;
281  transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
282}
283
284.tr-15:hover ~ #card {
285  transition: 125ms ease-in-out;
286  transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
287}
288
289.tr-16:hover ~ #card {
290  transition: 125ms ease-in-out;
291  transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
292}
293
294.tr-17:hover ~ #card {
295  transition: 125ms ease-in-out;
296  transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
297}
298
299.tr-18:hover ~ #card {
300  transition: 125ms ease-in-out;
301  transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
302}
303
304.tr-19:hover ~ #card {
305  transition: 125ms ease-in-out;
306  transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
307}
308
309.tr-20:hover ~ #card {
310  transition: 125ms ease-in-out;
311  transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
312}
313
314.tr-21:hover ~ #card {
315  transition: 125ms ease-in-out;
316  transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
317}
318
319.tr-22:hover ~ #card {
320  transition: 125ms ease-in-out;
321  transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
322}
323
324.tr-23:hover ~ #card {
325  transition: 125ms ease-in-out;
326  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
327}
328
329.tr-24:hover ~ #card {
330  transition: 125ms ease-in-out;
331  transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
332}
333
334.tr-25:hover ~ #card {
335  transition: 125ms ease-in-out;
336  transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
337}
338
339.noselect {
340  -webkit-touch-callout: none;
341   /* iOS Safari */
342  -webkit-user-select: none;
343   /* Safari */
344   /* Konqueror HTML */
345  -moz-user-select: none;
346   /* Old versions of Firefox */
347  -ms-user-select: none;
348   /* Internet Explorer/Edge */
349  user-select: none;
350   /* Non-prefixed version, currently
351									supported by Chrome, Edge, Opera and Firefox */
352}

/*works janky on mobile :<*/
.container {
  position: relative;
  width: 190px;
  height: 254px;
  transition: 200ms;
}

.container:active {
  width: 180px;
  height: 245px;
}

#card {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  transition: 700ms;
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
}

.subtitle {
  transform: translateY(160px);
  color: rgb(134, 110, 221);
  text-align: center;
  width: 100%;
}

.title {
  opacity: 0;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out-out;
  transition-delay: 100ms;
  position: absolute;
  font-size: x-large;
  font-weight: bold;
  color: white;
}

.tracker:hover ~ #card .title {
  opacity: 1;
}

#prompt {
  bottom: 8px;
  left: 12px;
  z-index: 20;
  font-size: 20px;
  font-weight: bold;
  transition: 300ms ease-in-out-out;
  position: absolute;
  max-width: 110px;
  color: rgb(255, 255, 255);
}

.tracker {
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 100%;
}

.tracker:hover {
  cursor: pointer;
}

.tracker:hover ~ #card #prompt {
  opacity: 0;
}

.tracker:hover ~ #card {
  transition: 300ms;
  filter: brightness(1.1);
}

.container:hover #card::before {
  transition: 200ms;
  content: '';
  opacity: 80%;
}

.canvas {
  perspective: 800px;
  inset: 0;
  z-index: 200;
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5"
    "tr-6 tr-7 tr-8 tr-9 tr-10"
    "tr-11 tr-12 tr-13 tr-14 tr-15"
    "tr-16 tr-17 tr-18 tr-19 tr-20"
    "tr-21 tr-22 tr-23 tr-24 tr-25";
}

#card::before {
  content: '';
  background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
  filter: blur(2rem);
  opacity: 30%;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transition: 200ms;
}

.tr-1 {
  grid-area: tr-1;
}

.tr-2 {
  grid-area: tr-2;
}

.tr-3 {
  grid-area: tr-3;
}

.tr-4 {
  grid-area: tr-4;
}

.tr-5 {
  grid-area: tr-5;
}

.tr-6 {
  grid-area: tr-6;
}

.tr-7 {
  grid-area: tr-7;
}

.tr-8 {
  grid-area: tr-8;
}

.tr-9 {
  grid-area: tr-9;
}

.tr-10 {
  grid-area: tr-10;
}

.tr-11 {
  grid-area: tr-11;
}

.tr-12 {
  grid-area: tr-12;
}

.tr-13 {
  grid-area: tr-13;
}

.tr-14 {
  grid-area: tr-14;
}

.tr-15 {
  grid-area: tr-15;
}

.tr-16 {
  grid-area: tr-16;
}

.tr-17 {
  grid-area: tr-17;
}

.tr-18 {
  grid-area: tr-18;
}

.tr-19 {
  grid-area: tr-19;
}

.tr-20 {
  grid-area: tr-20;
}

.tr-21 {
  grid-area: tr-21;
}

.tr-22 {
  grid-area: tr-22;
}

.tr-23 {
  grid-area: tr-23;
}

.tr-24 {
  grid-area: tr-24;
}

.tr-25 {
  grid-area: tr-25;
}

.tr-1:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-2:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-3:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-4:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-5:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
}

.tr-6:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-7:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-8:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-9:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-10:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-11:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-12:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-13:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.tr-14:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}

.tr-15:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
}

.tr-16:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-17:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-18:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-19:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-20:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-21:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-22:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-23:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-24:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-25:hover ~ #card {
  transition: 125ms ease-in-out;
  transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
}

.noselect {
  -webkit-touch-callout: none;
   /* iOS Safari */
  -webkit-user-select: none;
   /* Safari */
   /* Konqueror HTML */
  -moz-user-select: none;
   /* Old versions of Firefox */
  -ms-user-select: none;
   /* Internet Explorer/Edge */
  user-select: none;
   /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}

Toggle prefixes

20K views

Copy to Figma

20K views

Comments

youssef-mostafa1534 30. April at 23:56

30. April at 23:56

was curious about how this worked, then i inspected it and wow!, you used an invisible grid and when you hover over a cell it tilts the card in that direction, IT'S GENIUS, i would have never thought to do it

BHB7 12. April at 9:17

12. April at 9:17

666

Mdkawsarislam2002 20. September 2023. at 12:35

20. September 2023. at 12:35

wow, Without js! it's Looks awesome

kennyotsu

Pro+

16. October 2023. at 10:40

@Mdkawsarislam2002 Thank you! :D

kntjspr 12. September 2023. at 9:39

12. September 2023. at 9:39

No js🤯

SteveBloX

Pro

23. July 2023. at 10:03

It's very impressive to achieve this without JS. Congrats 👏

kennyotsu

Pro+

23. July 2023. at 11:56

@SteveBloX Ayy! Thank you 😄

Variations

Get code

Link to post

MIT License

Copyright - 2024 kennyotsu (kotsu) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.