Card by gharsh11032000
#212121
1.card { 2 position: relative; 3 width: 190px; 4 height: 254px; 5 background-color: #000; 6 display: flex; 7 flex-direction: column; 8 justify-content: end; 9 padding: 12px; 10 gap: 12px; 11 border-radius: 8px; 12 cursor: pointer; 13} 14 15.card::before { 16 content: ''; 17 position: absolute; 18 inset: 0; 19 left: -5px; 20 margin: auto; 21 width: 200px; 22 height: 264px; 23 border-radius: 10px; 24 background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% ); 25 z-index: -10; 26 pointer-events: none; 27 transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 28} 29 30.card::after { 31 content: ""; 32 z-index: -1; 33 position: absolute; 34 inset: 0; 35 background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% ); 36 transform: translate3d(0, 0, 0) scale(0.95); 37 filter: blur(20px); 38} 39 40.heading { 41 font-size: 20px; 42 text-transform: capitalize; 43 font-weight: 700; 44} 45 46.card p:not(.heading) { 47 font-size: 14px; 48} 49 50.card p:last-child { 51 color: #e81cff; 52 font-weight: 600; 53} 54 55.card:hover::after { 56 filter: blur(30px); 57} 58 59.card:hover::before { 60 transform: rotate(-90deg) scaleX(1.34) scaleY(0.77); 61} 62 63
13K views
13K views
RihabJenzeri 27. November 2023. at 22:58
27. November 2023. at 22:58
machallah rabi ibarrek
Variations
71.1K views
423 views
396 views
278 views
260 views
235 views
MIT License