135 views
CSS
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}
HTML
1<div class="card"> 2 3 <div class="image"> 4 <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 116.83 182.61" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" class="img-product"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M99.33 20.55c-4.24,-1.91 -3.3,-0.4 -8.3,-3.82 -4.06,-2.78 -12.82,-7.22 -17.68,-9.3 -0.94,-0.4 -2.53,-1.19 -4.13,-1.73l-6.69 -1.8c-0.99,-0.23 -1.3,-0.65 -2.22,-0.84 -2.53,-0.53 -3.82,-0.46 -6.69,-1.8 -1.49,-0.7 -2.01,-1.69 -3.83,-1.04 -0.87,0.31 -1.19,0.64 -1.58,1.41 -2.44,4.98 -7.2,7.7 -11.26,11.02l-2.61 1.83c-3.93,2.6 -9.38,4.53 -13.7,6.73 -2.89,1.47 -0.86,0.97 -4.02,0.7 -3.13,-0.27 -6.21,3.31 -8.33,5.29 -1.04,0.97 -0.92,0.53 -1.85,1.4 -0.47,0.44 -1.08,1.33 -1.33,1.49 -1.07,0.68 -4.09,2.28 -4.75,3.1 -1.3,1.63 1.31,5.1 2.23,7.24 0.64,1.49 1.76,3.02 3.13,4.07 0.74,0.56 1.15,1.74 1.7,2.61 -4.07,2.78 -3.12,3.46 -2.09,4.55 2.17,2.3 3.66,4.97 5.89,7.28 4.1,4.26 1.12,4.68 2.64,8.38 0.55,1.33 0.85,1.09 0.9,2.64 0.11,3.4 -2.12,4.67 -1.04,9.36 1.66,7.23 0.4,2.11 0.06,5.96 -0.07,0.84 0.09,2.01 0.28,2.8 0.37,1.51 0.52,1.49 1.31,2.75 -3.14,5.43 0.18,6.41 -0.44,8.98 -0.6,2.51 -0.95,3.64 -0.11,6.01 0.32,0.9 1.2,2.1 1.3,2.75 0.18,1.1 -0.42,1.33 -0.22,2.94 0.25,2.12 -0.18,4.23 0.11,5.95 0.29,1.75 0.42,0.99 0.2,3.05 -0.34,3.15 -1.45,5.88 -0.63,9.03 0.31,1.2 -2.36,8.82 -2.7,10.03 -1.79,6.36 -5.05,13.1 -6.2,19.61 -0.61,3.43 -2.34,1.66 -1.11,6.28 0.92,3.47 4.04,4.61 5.91,7.28 0.79,1.12 0.41,1.28 1.7,2.65l2.35 2.25c1.77,1.48 2.49,2.9 5.16,4.13l2.42 0.76c2.87,0.45 5.92,-1.16 8.06,-2.98l5.48 -5.18c2.01,-2 3.71,-4.85 5.66,-6.98 2.12,-2.32 9.8,-15.54 11.11,-18.32 0.6,-1.26 1.15,-1.61 1.93,-2.45 1.29,-1.38 0.99,-2.19 1.76,-3.35 0.69,-1.05 1.38,-1.26 2.33,-2.87 2.62,-4.45 24.66,-42 26.3,-45.85 0.9,-2.11 3.13,-4.62 4.12,-6.85 2.49,-5.61 5.17,-12.08 8.85,-17.34 2.18,-3.12 8.43,-13.52 8.19,-15.8 0.86,-0.42 7.8,-14 8.75,-15.88 2.13,-4.22 1.53,-9.85 -2.88,-12.09 -4.39,-2.47 -8.77,-3.95 -13.43,-6.05z" class="fil-shoes2"></path></g></svg> 5 </div> 6 <div class="text"> 7 <span>Shoes Force</span> 8 <p>$100</p> 9 </div> 10</div>