├── assets
├── js
│ └── main.js
└── css
│ └── style.css
└── index.html
/assets/js/main.js:
--------------------------------------------------------------------------------
1 | const cards = document.querySelectorAll(".card");
2 | const wrapper = document.querySelector(".cards");
3 |
4 | wrapper.addEventListener("mousemove", (event) => {
5 | cards.forEach((card) => {
6 | const rect = card.getBoundingClientRect();
7 | const x = event.clientX - rect.left;
8 | const y = event.clientY - rect.top;
9 | card.style.setProperty("--xPos", `${x}px`);
10 | card.style.setProperty("--yPos", `${y}px`);
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | height: 100vh;
4 | display: grid;
5 | place-items: center;
6 | background: #0c1016;
7 | color: #ffffff;
8 | font-family: "Euclid Circular A";
9 | overflow-x: hidden;
10 | }
11 |
12 | * {
13 | box-sizing: border-box;
14 | user-select: none;
15 | }
16 |
17 | .cards {
18 | display: grid;
19 | grid-template-columns: repeat(4, 150px);
20 | grid-template-rows: repeat(4, 150px);
21 | gap: 8px;
22 | padding: 32px;
23 | }
24 |
25 | .cards:hover .card {
26 | background: radial-gradient(
27 | 800px circle at var(--xPos) var(--yPos),
28 | rgba(0, 255, 241, 0.4),
29 | transparent 15%
30 | );
31 | }
32 |
33 | .card {
34 | position: relative;
35 | display: flex;
36 | justify-content: center;
37 | align-items: center;
38 | background: radial-gradient(
39 | 400px circle at 0 0,
40 | rgba(0, 255, 241, 0),
41 | transparent 0%
42 | );
43 | border-radius: 8px;
44 | transition: 0.15s;
45 | }
46 |
47 | .cards .card:hover::before {
48 | opacity: 1;
49 | }
50 |
51 | .card::before {
52 | content: "";
53 | position: absolute;
54 | top: 0;
55 | left: 0;
56 | right: 0;
57 | bottom: 0;
58 | border-radius: inherit;
59 | background: radial-gradient(
60 | 500px circle at var(--xPos) var(--yPos),
61 | rgba(0, 255, 241, 0.1),
62 | transparent 35%
63 | );
64 | opacity: 0;
65 | transition: all 0.15s ease-in-out;
66 | }
67 |
68 | .card-content {
69 | display: flex;
70 | flex-direction: column;
71 | justify-content: center;
72 | align-items: center;
73 | gap: 16px;
74 | background: #13161c;
75 | border-radius: inherit;
76 | transition: all 0.25s;
77 | height: calc(100% - 2px);
78 | width: calc(100% - 2px);
79 | }
80 |
81 | .card :is(i, h2) {
82 | opacity: 0.45;
83 | transition: 0.3s;
84 | }
85 |
86 | .card:hover :is(i, h2) {
87 | opacity: 1;
88 | }
89 |
90 | .card i {
91 | font-size: 38px;
92 | }
93 |
94 | .card h2 {
95 | margin: 0;
96 | font-weight: 400;
97 | font-size: 19px;
98 | }
99 |
100 | .made {
101 | text-align: center;
102 | justify-content: center;
103 | align-items: center;
104 | margin-top: -50px;
105 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
106 | font-weight: 100;
107 | }
108 |
109 | .made a {
110 | text-decoration: none;
111 | color: white;
112 | }
113 |
114 | .made a:hover {
115 | text-decoration: underline;
116 | color: #45FFCA;
117 | font-style: italic;
118 | font-weight: bold;
119 | }
120 |
121 | .made a:active {
122 | color: #F11A7B;
123 | }
124 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Flashlight Grid | byb @Risnugr
7 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
Ace
18 |
19 |
20 |
21 |
22 |
23 |
Act
24 |
25 |
26 |
27 |
28 |
29 |
Algo
30 |
31 |
32 |
33 |
34 |
35 |
36 |
Astro
37 |
38 |
39 |
40 |
41 |
42 |
Atl
43 |
44 |
45 |
46 |
47 |
48 |
Auc
49 |
50 |
51 |
52 |
53 |
54 |
55 |
Banca
56 |
57 |
58 |
59 |
60 |
61 |
Bbr
62 |
63 |
64 |
65 |
66 |
67 |
Bay
68 |
69 |
70 |
71 |
72 |
73 |
Bcn
74 |
75 |
76 |
77 |
78 |
79 |
Bcpt
80 |
81 |
82 |
83 |
84 |
85 |
Bdg
86 |
87 |
88 |
89 |
90 |
91 |
Bdl
92 |
93 |
94 |
95 |
96 |
97 |
Bela
98 |
99 |
100 |
101 |
102 |
103 |
Blitz
104 |
105 |
106 |
107 |
108 |
109 |
Block
110 |
111 |
112 |