Card by ElsayedShamsEldeen
#e8e8e8
1.main_card { 2 position: relative; 3 width: 200px; 4 height: 200px; 5 background: lightgrey; 6 border-radius: 30px; 7 overflow: hidden; 8 transition: all 1s ease-in-out; 9} 10 11.background { 12 position: absolute; 13 inset: 0; 14 background: #075891; 15} 16 17.cool_card_logo { 18 position: absolute; 19 right: 50%; 20 bottom: 50%; 21 transform: translate(50%, 50%); 22 transition: all 0.6s ease-in-out; 23 font-size: 30px; 24 font-weight: bold; 25 color: #fff; 26} 27 28.icon { 29 display: inline-block; 30 width: 20px; 31 height: 20px; 32} 33 34.icon { 35 font-weight: bold; 36} 37 38.box { 39 position: absolute; 40 padding: 10px; 41 text-align: right; 42 background: rgba(255, 255, 255, 0.389); 43 border-top: 2px solid rgb(255, 255, 255); 44 border-right: 1px solid white; 45 border-radius: 10% 13% 42% 0%/10% 12% 75% 0%; 46 box-shadow: rgba(100, 100, 111, 0.364) -7px 7px 29px 0px; 47 transform-origin: bottom left; 48 transition: all 1s ease-in-out; 49} 50 51.box::before { 52 content: ""; 53 position: absolute; 54 inset: 0; 55 border-radius: inherit; 56 opacity: 0; 57 transition: all 0.5s ease-in-out; 58} 59 60.box:hover .svg { 61 fill: white; 62} 63 64.box1 { 65 width: 85%; 66 height: 85%; 67 bottom: -85%; 68 left: -85%; 69} 70 71.box2 { 72 width: 65%; 73 height: 65%; 74 bottom: -65%; 75 left: -65%; 76 transition-delay: 0.2s; 77} 78 79.box3 { 80 width: 45%; 81 height: 45%; 82 bottom: -45%; 83 left: -45%; 84 transition-delay: 0.4s; 85} 86 87.box4 { 88 width: 25%; 89 height: 25%; 90 bottom: -25%; 91 left: -25%; 92 transition-delay: 0.6s; 93} 94 95.main_card:hover { 96 transform: scale(1.1); 97} 98 99.main_card:hover .box { 100 bottom: -1px; 101 left: -1px; 102} 103 104.main_card:hover .cool_card_logo { 105 transform: translate(0, 0); 106 bottom: 20px; 107 right: 20px; 108} 109
305 views
Variation of acard
MIT License