#212121
1.card { 2 --background: linear-gradient(to left, #f7ba2b 0%, #ea5358 100%); 3 width: 190px; 4 height: 254px; 5 padding: 5px; 6 border-radius: 1rem; 7 overflow: visible; 8 background: #f7ba2b; 9 background: var(--background); 10 position: relative; 11 z-index: 1; 12} 13 14.card::after { 15 position: absolute; 16 content: ""; 17 top: 30px; 18 left: 0; 19 right: 0; 20 z-index: -1; 21 height: 100%; 22 width: 100%; 23 transform: scale(0.8); 24 filter: blur(25px); 25 background: #f7ba2b; 26 background: var(--background); 27 transition: opacity .5s; 28} 29 30.card-info { 31 --color: #181818; 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: .7rem; 41} 42 43.card .title { 44 font-weight: bold; 45 letter-spacing: .1em; 46} 47 48/*Hover*/ 49.card:hover::after { 50 opacity: 0; 51} 52 53.card:hover .card-info { 54 color: #f7ba2b; 55 transition: color 1s; 56} 57
Comments
MIT License