Card by gharsh11032000
#212121
1.card { 2 width: 300px; 3 height: 200px; 4 background-color: #FF3CAC; 5 background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%); 6 color: white; 7 border-radius: 8px; 8 overflow: hidden; 9 position: relative; 10 perspective: 1000px; 11 transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1); 12 cursor: pointer; 13} 14 15.card-content { 16 padding: 20px; 17 position: relative; 18 z-index: 1; 19} 20 21.card:hover { 22 transform: scale(1.05); 23 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 24} 25 26.card:before { 27 content: ""; 28 position: absolute; 29 top: 0; 30 left: 0; 31 width: 100%; 32 height: 60%; 33 background-color: rgba(0, 0, 0, 0.1); 34 opacity: 0; 35 transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1); 36 z-index: 1; 37} 38 39.card:hover:before { 40 opacity: 1; 41} 42 43.card .card-title { 44 font-size: 24px; 45 font-weight: 700; 46 margin-bottom: 8px; 47 text-transform: capitalize; 48} 49 50.card .card-para { 51 font-size: 16px; 52 opacity: 0.8; 53} 54 55.card-content { 56 transform: translateY(50%); 57 transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1); 58} 59 60.card:hover .card-content { 61 transform: translateY(0%); 62} 63
1.1K views
1.1K views
MIT License