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