پیشنمایش زنده
کد HTML
<div class="card">
<div class="image">
<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>
</div>
<div class="text">
<span>Shoes Force</span>
<p>$100</p>
</div>
</div>
کد CSS
.card {
position: relative;
background: #fff;
width: 190px;
height: 265px;
border-radius: 8px;
cursor: pointer;
transition: all 120ms;
overflow: hidden;
box-shadow: 0px 1px 13px rgba(0,0,0,0.1);
}
.card:active {
transform: scale(.95);
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 25px 5px rgba(255, 255, 255, .5);
z-index: 1;
}
.card::after {
content: "Add to Cart";
position: absolute;
bottom: -50%;
left: 0;
padding-left: 15px;
background: #181818;
width: 100%;
height: 60px;
color: #fff;
line-height: 50px;
text-transform: uppercase;
z-index: 2;
transition: all .2s ease-in;
}
.card:hover::after {
bottom: 0;
}
.card:active::after {
content: "Adding !";
height: 65px;
}
.image {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: auto;
filter: drop-shadow(3px 3px 5px #18181815);
transform: translate(-50%, -50%);
animation: shoes 1s ease infinite alternate;
transition: all .5s ease-in;
}
@keyframes shoes {
from {
top: 48%;
}
to {
top: 52%;
}
}
.card:hover .image {
/* top: 20%;
left: 30%; */
width: 220px;
height: auto;
animation: none;
transform: rotate(15deg) translate(-35%, -25%);
}
.text {
position: absolute;
top: 15%;
left: -80%;
color: #181818;
transition: all .3s ease-in;
}
.text span {
font-size: 25px;
font-weight: 400;
margin-bottom: 5px;
}
.text p {
font-size: 18px;
font-weight: bold;
}
.card:hover .text {
top: 15%;
left: 5%;
}
.fil-shoes2 {
fill: #a59573
}