├── 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 |
51 | 52 | --------------------------------------------------------------------------------