Card by gharsh11032000
#e8e8e8
1.card { 2 width: 300px; 3 height: 200px; 4 background-color: #4158d0; 5 background-image: linear-gradient( 6 43deg, 7 #4158d0 0%, 8 #c850c0 46%, 9 #ffcc70 100% 10 ); 11 border-radius: 8px; 12 color: white; 13 overflow: hidden; 14 position: relative; 15 transform-style: preserve-3d; 16 perspective: 1000px; 17 transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); 18 cursor: pointer; 19 transform: translate3d(7%, -2%, 0px) scale3d(0.9, 0.8, 1) rotateX(15deg) 20 rotateY(-9deg) rotateZ(32deg); 21} 22 23.card-content { 24 padding: 20px; 25 position: relative; 26 z-index: 1; 27 display: flex; 28 flex-direction: column; 29 gap: 10px; 30 color: white; 31 align-items: center; 32 justify-content: center; 33 text-align: center; 34 height: 100%; 35} 36 37.card-content .card-title { 38 font-size: 24px; 39 font-weight: 700; 40 color: inherit; 41 text-transform: uppercase; 42} 43 44.card-content .card-para { 45 color: inherit; 46 opacity: 0.8; 47 font-size: 14px; 48} 49 50.card:hover { 51 transform: rotateY(0) rotateX(0) scale(1); 52 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 53} 54 55.card:before { 56 content: ""; 57 position: absolute; 58 top: 0; 59 left: 0; 60 width: 100%; 61 height: 100%; 62 background: linear-gradient(transparent, rgba(0, 0, 0, 0.1)); 63 transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); 64 z-index: 1; 65} 66 67.card:hover:before { 68 transform: translateX(-100%); 69} 70 71.card:after { 72 content: ""; 73 position: absolute; 74 top: 0; 75 right: 0; 76 width: 100%; 77 height: 100%; 78 background: linear-gradient(transparent, rgba(0, 0, 0, 0.1)); 79 transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); 80 z-index: 1; 81} 82 83.card:hover:after { 84 transform: translateX(100%); 85} 86
230 views
Variation of acard
MIT License