Card by Smit-Prajapati
#e8e8e8
1.card { 2 position: relative; 3 width: 230px; 4 height: 300px; 5 background: linear-gradient(-45deg, rgb(0, 153, 255) 0%, cyan 100%); 6 overflow: hidden; 7 border: 1px solid black; 8 box-shadow: rgba(141, 177, 205, 0.618) 0px 40px 30px -25px; 9 transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 10} 11 12.card:hover { 13 transform: scale(1.08); 14 box-shadow: rgba(141, 177, 205, 0.618) 0px 30px 30px -25px; 15} 16 17.icons-container { 18 position: absolute; 19 bottom: 0; 20 left: 0; 21 width: 100%; 22 display: flex; 23 justify-content: space-between; 24 padding: 1rem; 25 z-index: 999; 26} 27 28.icons-container .svg { 29 stroke: white; 30 width: 20px; 31 transition: transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 32} 33 34.icons-container .svg:hover { 35 transform: scale(1.5); 36 stroke: black; 37} 38 39.icons-container .twitter { 40 fill: white; 41} 42 43.icons-container .twitter:hover { 44 fill: black; 45 stroke: none; 46} 47 48.logo { 49 width: 50px; 50 padding: 1rem; 51} 52 53.logo .svg { 54 fill: white; 55} 56 57.title { 58 position: absolute; 59 left: 50%; 60 top: 50%; 61 transform: translate(-50%, -50%); 62 color: White; 63 font-weight: bold; 64 font-size: 1.1rem; 65} 66 67.box { 68 position: absolute; 69 width: 100%; 70 height: 100%; 71 box-shadow: rgba(66, 66, 66, 0.349) 5px 0px 10px 0px inset; 72 transition: all 0.5s ease-in-out; 73 display: grid; 74 place-content: center; 75 padding: 2rem 2rem 3rem 2rem; 76 border: 1px solid black; 77} 78 79.box .content { 80 position: relative; 81 transform: translateY(-100%); 82 opacity: 0; 83 transition: all 0.5s ease-in-out 0.3s; 84} 85 86.box .content .box-title { 87 display: block; 88 color: white; 89 font-size: 1.2rem; 90 font-weight: bold; 91 margin-bottom: 1rem; 92} 93 94.box .content .box-text { 95 color: rgba(255, 255, 255, 0.738); 96 font-size: 0.8rem; 97} 98 99.box:hover { 100 right: 0; 101 top: 0; 102 border-radius: 0; 103 border: 1px solid transparent; 104 box-shadow: rgba(66, 66, 66, 0) 5px 0px 10px 0px inset; 105} 106 107.box:hover .content { 108 transform: translate(0, 0); 109 opacity: 1; 110} 111 112.box1 { 113 top: -85%; 114 right: -40%; 115 background: rgb(255, 112, 60); 116 border-radius: 200px; 117} 118 119.box2 { 120 top: -70%; 121 right: -45%; 122 background: rgb(255, 174, 0); 123 border-radius: 200px; 124} 125 126.box3 { 127 top: -62%; 128 right: -30%; 129 background: rgb(255, 194, 52); 130 border-radius: 200px; 131}
1K views
1K views
MIT License