Card by MuhammadHasann
#212121
1.card { 2 position: relative; 3 background: #fff; 4 width: 190px; 5 height: 265px; 6 border-radius: 8px; 7 cursor: pointer; 8 transition: all 120ms; 9 overflow: hidden; 10 box-shadow: 0px 1px 13px rgba(0,0,0,0.1); 11} 12 13.card:active { 14 transform: scale(.95); 15} 16 17.card::before { 18 content: ""; 19 position: absolute; 20 top: 0; 21 left: 0; 22 width: 100%; 23 height: 100%; 24 box-shadow: inset 0px 0px 25px 5px rgba(255, 255, 255, .5); 25 z-index: 1; 26} 27 28.card::after { 29 content: "Add to Cart"; 30 position: absolute; 31 bottom: -50%; 32 left: 0; 33 padding-left: 15px; 34 background: #181818; 35 width: 100%; 36 height: 60px; 37 color: #fff; 38 line-height: 50px; 39 text-transform: uppercase; 40 z-index: 2; 41 transition: all .2s ease-in; 42} 43 44.card:hover::after { 45 bottom: 0; 46} 47 48.card:active::after { 49 content: "Adding !"; 50 height: 65px; 51} 52 53.image { 54 position: absolute; 55 top: 50%; 56 left: 50%; 57 width: 100px; 58 height: auto; 59 filter: drop-shadow(3px 3px 5px #18181815); 60 transform: translate(-50%, -50%); 61 animation: shoes 1s ease infinite alternate; 62 transition: all .5s ease-in; 63} 64 65@keyframes shoes { 66 from { 67 top: 48%; 68 } 69 70 to { 71 top: 52%; 72 } 73} 74 75.card:hover .image { 76 /* top: 20%; 77 left: 30%; */ 78 width: 220px; 79 height: auto; 80 animation: none; 81 transform: rotate(15deg) translate(-35%, -25%); 82} 83 84.text { 85 position: absolute; 86 top: 15%; 87 left: -80%; 88 color: #181818; 89 transition: all .3s ease-in; 90} 91 92.text span { 93 font-size: 25px; 94 font-weight: 400; 95 margin-bottom: 5px; 96} 97 98.text p { 99 font-size: 18px; 100 font-weight: bold; 101} 102 103.card:hover .text { 104 top: 15%; 105 left: 5%; 106} 107 108.fil-shoes2 { 109 fill: #a59573 110}
2.2K views
2.2K views
MIT License