151 views
CSS
1.card { 2 position: relative; 3 background: transparent; 4 width: 300px; 5 height: 300px; 6 border: none; 7} 8 9.card:hover { 10 width: 300px; 11} 12 13.card .container-image { 14 position: absolute; 15 top: 50%; 16 left: 50%; 17 transform: translate(-50%, -50%); 18 background: #e7e7e7; 19 width: 190px; 20 height: 190px; 21 cursor: pointer; 22 border: none; 23 border-radius: 50%; 24 box-shadow: 0 0 3px 1px #1818183d, 2px 2px 3px #18181865, inset 2px 2px 2px #ffffff; 25 transition: all .3s ease-in-out, opacity .3s; 26 transition-delay: .6s, 0s; 27} 28 29.card:hover .container-image { 30 opacity: 0; 31 border-radius: 8px; 32 transition-delay: 0s, .6s; 33} 34 35.card .container-image .image-circle { 36 position: absolute; 37 top: 50%; 38 left: 50%; 39 transform: translate(-50%, -50%); 40 width: 125px; 41 height: auto; 42 object-fit: contain; 43 filter: drop-shadow(2px 2px 2px #1818188a); 44 transition: all .3s ease-in-out; 45 transition-delay: .4s; 46} 47 48.card:hover .container-image .image-circle { 49 opacity: 0; 50 transition-delay: 0s; 51} 52 53.card .content { 54 display: flex; 55 justify-content: space-between; 56 align-items: center; 57 position: absolute; 58 top: 50%; 59 left: 50%; 60 transform: translate(-50%, -50%); 61 background: #e7e7e7; 62 padding: 20px; 63 width: 190px; 64 height: 190px; 65 cursor: pointer; 66 border: none; 67 border-radius: 8px; 68 box-shadow: 0 0 3px 1px #1818183d, 2px 2px 3px #18181865, inset 2px 2px 2px #ffffff; 69 visibility: hidden; 70 transition: .3s ease-in-out; 71 transition-delay: 0s; 72 z-index: 1; 73} 74 75.card:hover .content { 76 width: 290px; 77 height: 190px; 78 visibility: visible; 79 transition-delay: .5s; 80} 81 82.card .content .detail { 83 display: flex; 84 flex-direction: column; 85 width: 100%; 86 height: 100%; 87 opacity: 0; 88 transition: all .3s ease-in-out; 89 transition-delay: 0s; 90} 91 92.card:hover .content .detail { 93 color: #181818; 94 opacity: 100%; 95 transition: 1s; 96 transition-delay: .3s; 97} 98 99.card .content .detail span { 100 margin-bottom: 5px; 101 font-size: 18px; 102 font-weight: 800; 103} 104 105.card .content .detail button { 106 background: #b8854b; 107 margin-top: auto; 108 width: 75px; 109 height: 25px; 110 color: #ffffff; 111 font-size: 13px; 112 border: none; 113 border-radius: 8px; 114 transition: .3s ease-in-out; 115} 116 117.card .content .detail button:hover { 118 background: #d39f63; 119} 120 121.card .content .product-image { 122 position: relative; 123 width: 100%; 124 height: 100%; 125} 126 127.card .content .product-image .box-image { 128 display: flex; 129 position: absolute; 130 top: 0; 131 left: -25%; 132 width: 100%; 133 height: 115%; 134 opacity: 0; 135 transform: scale(.5); 136 transition: all .5s ease-in-out; 137 transition-delay: 0s; 138} 139 140.card:hover .content .product-image .box-image { 141 top: -25%; 142 left: 0; 143 opacity: 100%; 144 transform: scale(1); 145 transition-delay: .3s; 146} 147 148.card .content .product-image .box-image .img-product { 149 margin: auto; 150 width: 7rem; 151 height: auto; 152} 153 154.fil-shoes1, .fil-shoes2 { 155 fill: #333333 156}
HTML
1<div class="card"> 2 <div class="container-image"> 3 <svg class="image-circle" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 335.76 195.21" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-shoes1" d="M332.99 147.72c-0.87,-8.61 -2.43,-5.69 -1.57,-16.93 0.7,-9.13 -0.29,-27.37 -1.46,-37.14 -0.23,-1.89 -0.43,-5.19 -1.06,-8.26l-3.31 -12.45c-0.54,-1.82 -0.16,-2.7 -0.7,-4.36 -1.5,-4.56 -2.81,-6.58 -3.32,-12.45 -0.27,-3.05 0.85,-4.81 -1.89,-7.13 -1.31,-1.11 -2.14,-1.33 -3.74,-1.23 -10.29,0.69 -19.1,-4.44 -28.23,-7.89l-5.37 -2.51c-7.84,-3.92 -16.02,-10.9 -23.59,-15.81 -5.06,-3.28 -2.36,-0.49 -4.87,-5.83 -2.48,-5.29 -11.1,-6.93 -16.27,-8.5 -2.53,-0.76 -1.72,-0.99 -3.98,-1.68 -1.14,-0.35 -3.14,-0.5 -3.63,-0.76 -2.09,-1.09 -7.48,-4.47 -9.41,-4.76 -3.83,-0.58 -7,6.85 -9.59,10.32 -1.8,2.42 -3.23,5.65 -3.64,8.83 -0.22,1.71 -1.74,3.48 -2.63,5.16 -8.27,-3.97 -8.47,-1.81 -9.27,0.86 -1.69,5.63 -4.59,10.52 -6.25,16.27 -3.05,10.56 -6.49,6.16 -11.04,12.04 -1.64,2.12 -0.97,2.39 -3.42,3.9 -5.38,3.33 -9.5,0.93 -16.05,7.03 -10.09,9.4 -3.03,2.62 -9.55,5.65 -1.43,0.66 -3.15,2.01 -4.26,3.06 -2.1,2.01 -1.92,2.22 -3.22,4.67 -11.67,0 -10.17,6.25 -14.88,7.64 -4.6,1.36 -6.75,1.85 -9.78,5.42 -1.14,1.35 -2.27,3.88 -3.22,4.66 -1.61,1.31 -2.53,0.56 -4.95,2.37 -3.18,2.38 -6.99,3.65 -9.48,5.71 -2.55,2.1 -1.2,1.6 -4.73,3.15 -5.39,2.38 -10.82,3.14 -15.13,7.39 -1.64,1.62 -16.4,4.41 -18.66,4.98 -11.91,3.03 -25.8,4.05 -37.36,8.24 -6.1,2.21 -4.85,-2.22 -11.16,4.05 -4.74,4.71 -3.68,10.8 -6.22,16.29 -1.07,2.31 -1.69,1.85 -2.68,5.2l-1.44 5.87c-0.73,4.22 -2.36,6.72 -1.86,12.16l1.02 4.62c1.95,5.05 7.38,8.45 12.31,10.21l13.44 4.02c5.09,1.37 11.26,1.47 16.51,2.63 5.72,1.26 34.16,1.33 39.85,0.87 2.59,-0.21 3.66,0.35 5.75,0.84 3.42,0.8 4.45,-0.44 7.03,-0.28 2.33,0.14 3.31,1.06 6.8,1.09 9.62,0.08 90.6,0.66 98.33,-0.28 4.23,-0.52 10.35,0.74 14.86,0.26 11.36,-1.21 24.28,-2.91 36.17,-1.87 7.05,0.61 29.63,1.01 33.07,-1.51 1.48,0.99 29.81,-0.46 33.72,-0.68 8.78,-0.5 17.29,-6.69 16.8,-15.89 -0.1,-9.37 -1.8,-17.8 -2.75,-27.26z"></path></g></svg> 4 </div> 5 <div class="content"> 6 <div class="detail"> 7 <span>Lorem <br> Ipsum dolor.</span> 8 <p>$199</p> 9 <button>Buy</button> 10 </div> 11 <div class="product-image"> 12 <div class="box-image"> 13 <svg class="img-product" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 116.83 182.61" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-shoes2" 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"></path></g></svg> 14 </div> 15 </div> 16 </div> 17 </div>