This post is saved as a draft.
#212121
1.card { 2 position: relative; 3 width: 190px; 4 height: 254px; 5 color: #fff; 6 transition: 0.5s; 7 cursor: pointer; 8} 9 10.card:hover { 11 transform: translateY(-20px); 12} 13 14.card::before { 15 content: ''; 16 width: 100%; 17 height: 100%; 18 position: absolute; 19 top: 0; 20 left: 0; 21 background: linear-gradient(45deg, #ffbc00, #ff0058); 22 border-radius: 1.2em; 23} 24 25.card::after { 26 content: ''; 27 position: absolute; 28 top: 0; 29 left: 0; 30 width: 100%; 31 height: 100%; 32 background: linear-gradient(45deg, #ffbc00, #ff0058); 33 filter: blur(30px); 34} 35 36.card span { 37 position: absolute; 38 top: 6px; 39 left: 6px; 40 right: 6px; 41 bottom: 6px; 42 background-color: rgba(0, 0, 0, 0.6); 43 z-index: 2; 44 border-radius: 1em; 45} 46 47.card span::before { 48 content: ''; 49 position: absolute; 50 top: 0; 51 left: 0; 52 width: 50%; 53 height: 100%; 54 background-color: rgba(255, 255, 255, 0.1); 55} 56 57.card .content { 58 position: relative; 59 padding: 10px; 60 z-index: 10; 61 width: 100%; 62 height: 100%; 63 display: flex; 64 align-items: center; 65 justify-content: center; 66 font-weight: 800; 67 font-size: 1.5em; 68}
Variation of acard
Variation of acard