626 views
CSS
1.wallet { 2 --bg-color: #ceb2fc; 3 --bg-color-light: #f0e7ff; 4 --text-color-hover: #fff; 5 --box-shadow-color: rgba(206, 178, 252, 0.48); 6} 7 8.card { 9 width: 220px; 10 height: 321px; 11 background: #fff; 12 border-top-right-radius: 10px; 13 overflow: hidden; 14 display: flex; 15 flex-direction: column; 16 justify-content: center; 17 align-items: center; 18 position: relative; 19 box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04); 20 transition: all 0.3s ease-out; 21 text-decoration: none; 22} 23 24.card:hover { 25 transform: translateY(-5px) scale(1.005) translateZ(0); 26 box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11), 27 0 24px 46px var(--box-shadow-color); 28} 29 30.card:hover .overlay { 31 transform: scale(4) translateZ(0); 32} 33 34.card:hover .circle { 35 border-color: var(--bg-color-light); 36 background: var(--bg-color); 37} 38 39.card:hover .circle:after { 40 background: var(--bg-color-light); 41} 42 43.card:hover p { 44 color: var(--text-color-hover); 45} 46 47.card p { 48 font-size: 17px; 49 color: #4c5656; 50 margin-top: 30px; 51 z-index: 1000; 52 transition: color 0.3s ease-out; 53} 54 55.circle { 56 width: 131px; 57 height: 131px; 58 border-radius: 50%; 59 background: #fff; 60 border: 2px solid var(--bg-color); 61 display: flex; 62 justify-content: center; 63 align-items: center; 64 position: relative; 65 z-index: 1; 66 transition: all 0.3s ease-out; 67} 68 69.circle:after { 70 content: ""; 71 width: 118px; 72 height: 118px; 73 display: block; 74 position: absolute; 75 background: var(--bg-color); 76 border-radius: 50%; 77 top: 7px; 78 left: 7px; 79 transition: opacity 0.3s ease-out; 80} 81 82.circle svg { 83 z-index: 10000; 84 transform: translateZ(0); 85} 86 87.overlay { 88 width: 118px; 89 position: absolute; 90 height: 118px; 91 border-radius: 50%; 92 background: var(--bg-color); 93 top: 70px; 94 left: 50px; 95 z-index: 0; 96 transition: transform 0.3s ease-out; 97}
HTML
1<div class="card wallet"> 2 <div class="overlay"></div> 3 <div class="circle"> 4 5 6 <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="23 29 78 60" height="60px" width="78px"> 7 8 <defs></defs> 9 <g transform="translate(23.000000, 29.500000)" fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="icon"> 10 <rect rx="4.70247832" height="21.8788565" width="9.40495664" y="26.0333433" x="67.8357511" fill="#AC8BE9" id="Rectangle-3"></rect> 11 <rect rx="4.70247832" height="10.962961" width="9.40495664" y="38.776399" x="67.8357511" fill="#6A5297" id="Rectangle-3"></rect> 12 <polygon points="57.3086772 0 67.1649301 26.3776902 14.4413177 45.0699507 4.58506484 18.6922605" fill="#6A5297" id="Rectangle-2"> 13 </polygon> 14 <path fill="#8B6FC0" id="Rectangle" d="M0,19.6104296 C0,16.2921718 2.68622235,13.6021923 5.99495032,13.6021923 L67.6438591,13.6021923 C70.9547788,13.6021923 73.6388095,16.2865506 73.6388095,19.6104296 L73.6388095,52.6639057 C73.6388095,55.9821635 70.9525871,58.672143 67.6438591,58.672143 L5.99495032,58.672143 C2.68403068,58.672143 0,55.9877847 0,52.6639057 L0,19.6104296 Z"></path> 15 <path fill="#F6F1FF" id="Fill-12" d="M47.5173769,27.0835169 C45.0052827,24.5377699 40.9347162,24.5377699 38.422622,27.0835169 L36.9065677,28.6198808 L35.3905134,27.0835169 C32.8799903,24.5377699 28.8078527,24.5377699 26.2957585,27.0835169 C23.7852354,29.6292639 23.7852354,33.7559532 26.2957585,36.3001081 L36.9065677,47.0530632 L47.5173769,36.3001081 C50.029471,33.7559532 50.029471,29.6292639 47.5173769,27.0835169"></path> 16 <rect height="12.863158" width="15.6082259" y="26.1162588" x="58.0305835" fill="#AC8BE9" id="Rectangle-4"></rect> 17 <ellipse ry="2.23319575" rx="2.20116007" cy="33.0919007" cx="65.8346965" fill="#FFFFFF" id="Oval"> 18 </ellipse> 19 </g> 20 </svg> 21 22 </div> 23 <p>Wallet</p> 24</div> 25