Card by Gaurav-WebDev
#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 background: lightgray; 5 display: flex; 6 align-items: center; 7 justify-content: center; 8 font-size: 2em; 9 color: #333; 10 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 11 border-radius: 40px; 12 cursor: pointer; 13 position: relative; 14 transition: all 0.7s ease-in-out; 15 overflow: hidden; 16} 17 18.card::before { 19 content: ""; 20 position: absolute; 21 height: 40%; 22 width: 100%; 23 background-color: #088080; 24 bottom: 0; 25 right: 0; 26 transform: translatey(70px); 27 border-radius: 100%; 28 transition: all 0.7s ease-in-out; 29} 30 31.c-txt { 32 z-index: 2; 33} 34 35.card:hover::before { 36 transform: scale(7) translate(-20px); 37} 38 39.card:hover { 40 box-shadow: 1px -10px 500px 500px #9fe4e44a; 41 color: #f3f3f3; 42} 43
1.4K views
1.4K views
MIT License