├── assets
└── src
│ └── css
│ └── style.css
└── index.html
/assets/src/css/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --blue-rgb: 92 192 249;
3 | --green-rgb: 125 161 35;
4 | --brown-rgb: 127 46 23;
5 | }
6 |
7 | html, body {
8 | background-color: black;
9 | }
10 |
11 | body {
12 | min-height: 100vh;
13 | padding: 0;
14 | margin: 0;
15 | display: flex;
16 | align-items: center;
17 | justify-content: center;
18 | transition: background-color 1000ms;
19 | }
20 |
21 | body:has(.card[data-color="blue"]:hover) {
22 | background-color: rgb(var(--blue-rgb) / 25%);
23 | }
24 |
25 | body:has(.card[data-color="blue"]:hover) {
26 | background-color: rgb(var(--blue-rgb) / 25%);
27 | }
28 |
29 | body:has(.card[data-color="green"]:hover) {
30 | background-color: rgb(var(--green-rgb) / 25%);
31 | }
32 |
33 | body:has(.card[data-color="brown"]:hover) {
34 | background-color: rgb(var(--brown-rgb) / 25%);
35 | }
36 |
37 | #cards {
38 | width: 100%;
39 | display: flex;
40 | justify-content: space-evenly;
41 | }
42 |
43 | .card {
44 | background-size: cover;
45 | background-position: center;
46 | position: relative;
47 | cursor: pointer;
48 | outline: none;
49 | transition: scale 100ms;
50 | }
51 |
52 | .card .card-front-image {
53 | position: relative;
54 | z-index: 2;
55 | }
56 |
57 | .card .card-image {
58 | width: clamp(300px, 20vw, 500px);
59 | aspect-ratio: 2 / 3;
60 | border-radius: clamp(0.5rem, 0.75vw, 2rem);
61 | }
62 |
63 | .card-faders {
64 | height: 100%;
65 | width: 100%;
66 | position: absolute;
67 | left: 0px;
68 | top: 0px;
69 | z-index: 1;
70 | opacity: 0;
71 | transition: opacity 1500ms;
72 | pointer-events: none;
73 | }
74 |
75 | .card:hover .card-faders {
76 | opacity: 1;
77 | }
78 |
79 | .card:active {
80 | scale: 0.98;
81 | }
82 |
83 | .card-fader {
84 | position: absolute;
85 | left: 0px;
86 | top: 0px;
87 | }
88 |
89 | .card-fader:nth-child(odd) {
90 | animation: fade-left 3s linear infinite;
91 | }
92 |
93 | .card-fader:nth-child(even) {
94 | animation: fade-right 3s linear infinite;
95 | }
96 |
97 | .card-fader:is(:nth-child(3), :nth-child(4)) {
98 | animation-delay: 750ms;
99 | }
100 |
101 | .card-fader:is(:nth-child(5), :nth-child(6)) {
102 | animation-delay: 1500ms;
103 | }
104 |
105 | .card-fader:is(:nth-child(7), :nth-child(8)) {
106 | animation-delay: 2250ms;
107 | }
108 |
109 | @media(max-width: 1200px) {
110 | body {
111 | justify-content: flex-start;
112 | align-items: flex-start;
113 | }
114 |
115 | #cards {
116 | flex-direction: column;
117 | align-items: center;
118 | gap: 4rem;
119 | padding: 4rem;
120 | }
121 |
122 | .card .card-image {
123 | width: 400px;
124 | }
125 | }
126 |
127 | @media(max-width: 600px) {
128 | #cards {
129 | gap: 2rem;
130 | padding: 2rem;
131 | }
132 |
133 | .card {
134 | width: 80%;
135 | }
136 |
137 | .card .card-image {
138 | width: 100%;
139 | }
140 | }
141 |
142 | @keyframes fade-left {
143 | from {
144 | scale: 1;
145 | translate: 0%;
146 | opacity: 1;
147 | }
148 |
149 | to {
150 | scale: 0.8;
151 | translate: -30%;
152 | opacity: 0;
153 | }
154 | }
155 |
156 | @keyframes fade-right {
157 | from {
158 | scale: 1;
159 | translate: 0%;
160 | opacity: 1;
161 | }
162 |
163 | to {
164 | scale: 0.8;
165 | translate: 30%;
166 | opacity: 0;
167 | }
168 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Card Animation | by @Risnugr
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 |