Card by gharsh11032000
#212121
1.card-container { 2 width: 300px; 3 height: 300px; 4 position: relative; 5 border-radius: 10px; 6 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 7 overflow: hidden; 8} 9 10.card { 11 width: 100%; 12 height: 100%; 13 border-radius: inherit; 14} 15 16.card .front-content { 17 width: 100%; 18 height: 100%; 19 display: flex; 20 align-items: center; 21 justify-content: center; 22 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1) 23} 24 25.card .front-content p { 26 font-size: 32px; 27 font-weight: 700; 28 opacity: 1; 29 background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% ); 30 background-clip: text; 31 -webkit-background-clip: text; 32 -webkit-text-fill-color: transparent; 33 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1) 34} 35 36.card .content { 37 position: absolute; 38 top: 0; 39 left: 0; 40 width: 100%; 41 height: 100%; 42 display: flex; 43 flex-direction: column; 44 align-items: center; 45 justify-content: center; 46 text-align: center; 47 gap: 10px; 48 background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% ); 49 color: #e8e8e8; 50 padding: 20px; 51 line-height: 1.5; 52 border-radius: 5px; 53 pointer-events: none; 54 transform: translateY(96%); 55 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 56} 57 58.card .content .heading { 59 font-size: 32px; 60 font-weight: 700; 61} 62 63.card:hover .content { 64 transform: translateY(0); 65} 66 67.card:hover .front-content { 68 transform: translateY(-30%); 69} 70 71.card:hover .front-content p { 72 opacity: 0; 73} 74 75
3K views
3K views
Variations
3 MIT License