Card by AyuuLima
#212121
1.card { 2 position: relative; 3 width: 190px; 4 height: 254px; 5 background-color: rgb(0, 0, 0); 6 display: flex; 7 flex-direction: column; 8 justify-content: flex-end; 9 padding: 12px; 10 gap: 12px; 11 border-radius: 15px; 12 cursor: pointer; 13 color: #000000; 14} 15 16.card::before { 17 content: ""; 18 position: absolute; 19 inset: 0; 20 left: -5px; 21 margin: auto; 22 width: 200px; 23 height: 264px; 24 border-radius: 15px; 25 background: linear-gradient(-45deg, #1cc2ff 0%, #ff261b 100%); 26 z-index: -10; 27 pointer-events: none; 28 transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 29} 30 31.card::after { 32 content: ""; 33 z-index: -1; 34 position: absolute; 35 inset: 0; 36 background: linear-gradient(-45deg, #1cffa4 0%, #ff01aee6 100%); 37 transform: translate3d(0, 0, 0) scale(0.95); 38 filter: blur(40px); 39} 40 41.heading { 42 font-size: 20px; 43 text-transform: uppercase; 44 font-weight: 800; 45} 46 47.card p:not(.heading) { 48 font-size: 20px; 49 color: #000000; 50} 51 52.card p:not::after) { 53 font-size: 0px; 54 color: #ffffff; 55} 56 57.card p:last-child { 58 color: #ffffff; 59} 60 61.card:hover::after { 62 filter: blur(50px); 63} 64 65.card:hover::before { 66 transform: rotate(-90deg) scaleX(1.34) scaleY(0.77); 67} 68 69.card:hover { 70 transform: scale(1); 71} 72
399 views
Variation of acard
MIT License