Card by gharsh11032000
#e8e8e8
1.card { 2 position: relative; 3 display: flex; 4 align-items: center; 5 justify-content: center; 6 width: 320px; 7 border-radius: 24px; 8 line-height: 1.6; 9 transition: all 0.64s cubic-bezier(0.23, 1, 0.32, 1); 10} 11.content { 12 display: flex; 13 flex-direction: column; 14 align-items: flex-start; 15 gap: 24px; 16 padding: 36px; 17 border-radius: 24px; 18 background: transparent; 19 color: #000000; 20 z-index: 1; 21 transition: all 0.64s cubic-bezier(0.23, 1, 0.32, 1); 22} 23.card::before { 24 content: ""; 25 position: absolute; 26 top: 0; 27 left: 0; 28 background-color: #0a3cff; 29 border-radius: inherit; 30 height: 100%; 31 width: 100%; 32 opacity: 0; 33 transform: skew(-24deg); 34 clip-path: circle(0% at 50% 50%); 35 transition: all 0.64s cubic-bezier(0.23, 1, 0.32, 1); 36} 37.content .heading { 38 font-weight: 700; 39 font-size: 36px; 40 line-height: 1.3; 41 z-index: 1; 42} 43.content .para { 44 z-index: 1; 45 opacity: 0.8; 46 font-size: 18px; 47} 48.content .para-sm { 49 font-size: 16px; 50} 51.card:hover::before { 52 opacity: 1; 53 transform: skew(0deg); 54 clip-path: circle(140.9% at 0 0); 55} 56.card:hover .content { 57 color: #ffffff; 58} 59
180 views
180 views
MIT License