Card by Javierrocadev
#212121
1.card { 2 width: 350px; 3 height: 300px; 4 display: flex; 5 flex-direction: column; 6 align-items: center; 7 justify-content: center; 8 text-align: center; 9 gap: 10px; 10 background-color: #fffffe; 11 border-radius: 15px; 12 position: relative; 13 overflow: hidden; 14} 15 16.card::before { 17 content: ""; 18 width: 350px; 19 height: 100px; 20 position: absolute; 21 top: 0; 22 border-top-left-radius: 15px; 23 border-top-right-radius: 15px; 24 border-bottom: 3px solid #fefefe; 25 background: linear-gradient(40deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); 26 transition: all 0.5s ease; 27} 28 29.card * { 30 z-index: 1; 31} 32 33.image { 34 width: 90px; 35 height: 90px; 36 background-color: #1468BF; 37 border-radius: 50%; 38 border: 4px solid #fefefe; 39 margin-top: 30px; 40 transition: all 0.5s ease; 41} 42 43.card-info { 44 display: flex; 45 flex-direction: column; 46 align-items: center; 47 gap: 15px; 48 transition: all 0.5s ease; 49} 50 51.card-info span { 52 font-weight: 600; 53 font-size: 24px; 54 color: #161A42; 55 margin-top: 15px; 56 line-height: 5px; 57} 58 59.card-info p { 60 color: rgba(0, 0, 0, 0.5); 61} 62 63.button { 64 text-decoration: none; 65 background-color: #1468BF; 66 color: white; 67 padding: 5px 20px; 68 border-radius: 5px; 69 border: 1px solid white; 70 transition: all 0.5s ease; 71} 72 73.card:hover::before { 74 width: 350px; 75 height: 300px; 76 border-bottom: none; 77 border-bottom-left-radius: 15px; 78 border-bottom-right-radius: 15px; 79 transform: scale(0.95); 80} 81 82.card:hover .card-info { 83 transform: translate(0%,-25%); 84} 85 86.card:hover .image { 87 transform: scale(2) translate(-60%,-40%); 88} 89 90.button:hover { 91 background-color: #FF6844; 92 transform: scale(1.1); 93}
1.4K views
1.4K views
Variations
1 MIT License