#e8e8e8
1.card { 2 position: relative; 3 width: 200px; 4 height: 200px; 5 background: lightgrey; 6 border-radius: 30px; 7 overflow: hidden; 8 box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 9 transition: all 1s ease-in-out; 10 border: 2px solid rgb(255, 255, 255); 11} 12 13.background { 14 position: absolute; 15 inset: 0; 16 background-color: #4158D0; 17 background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); 18} 19 20.logo { 21 position: absolute; 22 right: 50%; 23 bottom: 50%; 24 transform: translate(50%, 50%); 25 transition: all 0.6s ease-in-out; 26 font-size: 1.3em; 27 font-weight: 600; 28 color: #ffffff; 29 letter-spacing: 3px; 30} 31 32.logo .logo-svg { 33 fill: white; 34 width: 30px; 35 height: 30px; 36} 37 38.icon { 39 display: inline-block; 40 width: 20px; 41 height: 20px; 42} 43 44.icon .svg { 45 fill: rgba(255, 255, 255, 0.797); 46 width: 100%; 47 transition: all 0.5s ease-in-out; 48} 49 50.box { 51 position: absolute; 52 padding: 10px; 53 text-align: right; 54 background: rgba(255, 255, 255, 0.389); 55 border-top: 2px solid rgb(255, 255, 255); 56 border-right: 1px solid white; 57 border-radius: 10% 13% 42% 0%/10% 12% 75% 0%; 58 box-shadow: rgba(100, 100, 111, 0.364) -7px 7px 29px 0px; 59 transform-origin: bottom left; 60 transition: all 1s ease-in-out; 61} 62 63.box::before { 64 content: ""; 65 position: absolute; 66 inset: 0; 67 border-radius: inherit; 68 opacity: 0; 69 transition: all 0.5s ease-in-out; 70} 71 72.box:hover .svg { 73 fill: white; 74} 75 76.box1 { 77 width: 70%; 78 height: 70%; 79 bottom: -70%; 80 left: -70%; 81} 82 83.box1::before { 84 background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #ff53d4 60%, #62c2fe 90%); 85} 86 87.box1:hover::before { 88 opacity: 1; 89} 90 91.box1:hover .icon .svg { 92 filter: drop-shadow(0 0 5px white); 93} 94 95.box2 { 96 width: 50%; 97 height: 50%; 98 bottom: -50%; 99 left: -50%; 100 transition-delay: 0.2s; 101} 102 103.box2::before { 104 background: radial-gradient(circle at 30% 107%, #91e9ff 0%, #00ACEE 90%); 105} 106 107.box2:hover::before { 108 opacity: 1; 109} 110 111.box2:hover .icon .svg { 112 filter: drop-shadow(0 0 5px white); 113} 114 115.box3 { 116 width: 30%; 117 height: 30%; 118 bottom: -30%; 119 left: -30%; 120 transition-delay: 0.4s; 121} 122 123.box3::before { 124 background: radial-gradient(circle at 30% 107%, #969fff 0%, #b349ff 90%); 125} 126 127.box3:hover::before { 128 opacity: 1; 129} 130 131.box3:hover .icon .svg { 132 filter: drop-shadow(0 0 5px white); 133} 134 135.box4 { 136 width: 10%; 137 height: 10%; 138 bottom: -10%; 139 left: -10%; 140 transition-delay: 0.6s; 141} 142 143.card:hover { 144 transform: scale(1.1); 145} 146 147.card:hover .box { 148 bottom: -1px; 149 left: -1px; 150} 151 152.card:hover .logo { 153 transform: translate(70px, -52px); 154 letter-spacing: 0px; 155}
1.5K views
Variation of acard
1.5K views
Variation of acard
Comments
MIT License