Card by gharsh11032000
#212121
1.card { 2 position: relative; 3 width: 350px; 4 height: 250px; 5 background-image: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% ); 6 border-radius: 10px; 7 display: flex; 8 padding: 10px 30px; 9 flex-direction: column; 10 gap: 10px; 11 align-items: center; 12 justify-content: center; 13 overflow: hidden; 14 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 15} 16 17.heading { 18 font-size: 24px; 19 font-weight: 700; 20 color: #ffffff; 21} 22 23.para { 24 text-align: center; 25 color: #ffffff; 26 opacity: 0.7; 27 line-height: 1.4; 28} 29 30.overlay { 31 position: absolute; 32 top: 0; 33 left: 0; 34 width: 100%; 35 height: 100%; 36 opacity: 0; 37 background-color: rgba(0, 0, 0, 0.6); 38 transition: opacity 0.3s ease; 39 pointer-events: none; 40} 41 42.card:hover .overlay { 43 opacity: 1; 44 pointer-events: auto; 45} 46 47.card .card-btn { 48 position: absolute; 49 top: 50%; 50 left: 50%; 51 font-weight: 600; 52 padding: 10px 20px; 53 font-size: 16px; 54 transform: translate(-50%, -50%); 55 background-color: #ffffff; 56 border-radius: 50px; 57 display: flex; 58 align-items: center; 59 justify-content: center; 60 cursor: pointer; 61 z-index: 999; 62 border: none; 63 opacity: 0; 64 scale: 0; 65 transform-origin: 0 0; 66 box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.15); 67 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 68} 69 70.card:hover .card-btn { 71 opacity: 1; 72 scale: 1; 73} 74 75.card .card-btn:hover { 76 box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.3); 77} 78 79.card .card-btn:active { 80 scale: 0.95; 81} 82 83.overlay::after { 84 content: ""; 85 position: absolute; 86 top: 50%; 87 left: 50%; 88 transform: translate(-50%, -50%) scale(0); 89 width: 100%; 90 height: 100%; 91 background-image: linear-gradient(-45deg, #f89b2980 0%, #ff0f7b80 100% ); 92 transition: transform 0.5s ease; 93} 94 95.card:hover .overlay::after { 96 transform: translate(-50%, -50%) scale(2); 97} 98
1.9K views
1.9K views
MIT License