560 views
1.card { 2 position: relative; 3 background: #a68b8a; 4 width: 190px; 5 height: 265px; 6 cursor: pointer; 7 transition: all .3 ease; 8 overflow: visible; 9 box-shadow: 0px 1px 5px rgba(0, 0, 0, .3); 10} 11 12.product { 13 content: ""; 14 position: absolute; 15 top: 10%; 16 left: 50%; 17 transform: translate(-50%, 0); 18 width: 150px; 19 height: 150px; 20 background-color: #faf3e8; 21 z-index: 1; 22} 23 24.product p { 25 font-size: 17px; 26 text-align: center; 27 color: #181818; 28 line-height: 150px; 29} 30 31.shine { 32 position: relative; 33 top: 0; 34 left: 0; 35 width: 190px; 36 height: 265px; 37 overflow: hidden; 38} 39 40.shine-effect { 41 position: absolute; 42 top: -15%; 43 left: 150%; 44 width: 25px; 45 height: 400px; 46 background-color: #ffffff2a; 47 box-shadow: 0 0 15px 2px #ffffff42; 48 transform: rotate(25deg); 49 transition: all 1s cubic-bezier(0.78, 0.02, 0.5, 0.77); 50 z-index: 5; 51} 52 53.pattern-1 { 54 position: absolute; 55 top: 0; 56 left: 0; 57 width: 125px; 58 height: auto; 59 z-index: 2; 60} 61 62.pattern-2 { 63 position: absolute; 64 top: -10%; 65 left: -10%; 66 width: 200px; 67 height: auto; 68 z-index: 2; 69} 70 71.tree { 72 position: absolute; 73 bottom: 1%; 74 right: -2%; 75 width: 100px; 76 height: auto; 77 transform-origin: 100% 0; 78 transform: rotate(-15deg); 79 z-index: 3; 80} 81 82.tape-1 { 83 position: absolute; 84 top: -20%; 85 left: 2%; 86 width: 35px; 87 height: auto; 88 filter: drop-shadow(1px 3px 3px #18181870); 89 z-index: 6; 90} 91 92.tape-2 { 93 position: absolute; 94 top: -25%; 95 right: 2%; 96 width: 35px; 97 height: auto; 98 filter: drop-shadow(1px 3px 3px #18181870); 99 z-index: 6; 100} 101 102.card:hover { 103 transform: scale(1.02); 104} 105 106.card:hover .tape-1 { 107 transform: scale(1); 108} 109 110.card:hover .tape-2 { 111 transform: scale(1); 112} 113 114.card:hover .shine-effect { 115 left: -100%; 116} 117 118.card:active { 119 transform: scale(1.02) translate(0, 5%); 120} 121 122.card:active .tape-1 { 123 transform-origin: 0 100%; 124 transform: scaleY(1.1); 125} 126 127.card:active .tape-2 { 128 transform-origin: 0 100%; 129 transform: scaleY(1.1); 130} 131 132.fil-tape-10 { 133 fill: #A99473 134} 135 136.fil-tape-11 { 137 fill: #BBAA88; 138 fill-rule: nonzero 139} 140 141.fil-tape-20 { 142 fill: #A99473 143} 144 145.fil-tape-21 { 146 fill: #BBAA88; 147 fill-rule: nonzero 148} 149 150.fil-pattern-1 { 151 fill: #f3dfde 152} 153 154.fil-pattern-2 { 155 fill: #333333; 156 fill-rule: nonzero 157} 158 159.fil0 { 160 fill: #333333 161}
MuhammadHasann
Muhammad Hasan
MIT License