Card by adamgiebl
#212121
1.card { 2 --background: linear-gradient(to left, #8c43f2 0%, #ff5c00 100%); 3 width: 220px; 4 height: 294px; 5 padding: 10px; 6 border-radius: 01rem; 7 overflow: visible; 8 background: #8c43f2; 9 background: var(--background); 10 position: relative; 11 z-index: 1; 12} 13 14.card::after { 15 position: absolute; 16 content: ""; 17 top: 40px; 18 left: 0; 19 right: 0; 20 z-index: -1; 21 height: 100%; 22 width: 100%; 23 transform: scale(0.9); 24 filter: blur(30px); 25 background: #8c43f2; 26 background: var(--background); 27 transition: opacity 0.5s; 28} 29 30.card-info { 31 --color: #ffffff; 32 background: var(--color); 33 color: var(--color); 34 display: flex; 35 justify-content: center; 36 align-items: center; 37 width: 100%; 38 height: 100%; 39 overflow: visible; 40 border-radius: 0.6rem; 41} 42 43.card .title { 44 font-weight: bold; 45 letter-spacing: 0.1em; 46} 47 48/*Hover*/ 49.card:hover::after { 50 opacity: 0; 51} 52 53.card:hover .card-info { 54 color: #8c43f2; 55 transition: color 1s; 56} 57
409 views
Variation of acard
MIT License