Card by Admin12121
#e8e8e8
1.education { 2 --bg-color: #ffd861; 3 --bg-color-light: #ffeeba; 4 --text-color-hover: #4C5656; 5 --box-shadow-color: rgba(255, 215, 97, 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:active { 48 transform: scale(1) translateZ(0); 49 box-shadow: 0 15px 24px rgba(0,0,0,0.11), 50 0 15px 24px var(--box-shadow-color); 51} 52 53.card p { 54 font-size: 17px; 55 color: #4C5656; 56 margin-top: 30px; 57 z-index: 1000; 58 transition: color 0.3s ease-out; 59} 60 61.circle { 62 width: 131px; 63 height: 131px; 64 border-radius: 50%; 65 background: #fff; 66 border: 3px solid var(--bg-color); 67 display: flex; 68 justify-content: center; 69 align-items: center; 70 position: relative; 71 z-index: 1; 72 transition: all 0.3s ease-out; 73} 74 75.circle:after { 76 content: ""; 77 width: 118px; 78 height: 118px; 79 display: block; 80 position: absolute; 81 background: var(--bg-color); 82 border-radius: 50%; 83 transition: opacity 0.3s ease-out; 84} 85 86.circle svg { 87 z-index: 10000; 88 transform: translateZ(0); 89} 90 91.overlay { 92 width: 118px; 93 position: absolute; 94 height: 118px; 95 border-radius: 50%; 96 background: var(--bg-color); 97 top: 70px; 98 left: 50px; 99 z-index: 0; 100 transition: transform 0.3s ease-out; 101}
860 views
860 views
Variations
3 MIT License