پیشنمایش زنده
کد HTML
<div
class="product-card w-[300px] rounded-md shadow-xl overflow-hidden z-[100] relative cursor-pointer snap-start shrink-0 py-8 px-6 bg-white flex flex-col items-center justify-center gap-3 transition-all duration-300 group"
>
<div class="para uppercase text-center leading-none z-40">
<p
style="-webkit-text-stroke: 1px rgb(207, 205, 205);
-webkit-text-fill-color: transparent;"
class="z-10 font-bold text-lg -mb-5 tracking-wider text-gray-500"
>
New Product
</p>
<p class="font-bold text-xl tracking-wider text-[#495c48] z-30">
New Product
</p>
</div>
<div
class="w-[180px] aspect-square relative z-20 after:absolute after:h-1 after:w-full after:opacity-0 after:bg-[#7b956a] after:top-8 after:left-0 after:group-hover:opacity-100 after:translate-x-1/2 after:translate-y-1/2 after:-z-20 after:group-hover:w-full after:transition-all after:duration-300 after:group-hover:origin-right after:group-hover:-translate-x-1/2 group-hover:translate-x-1/2 transition-all duration-300"
>
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
text-rendering="geometricPrecision"
shape-rendering="geometricPrecision"
image-rendering="optimizeQuality"
fill-rule="evenodd"
clip-rule="evenodd"
>
<linearGradient
y2="0"
y1="512"
x2="256"
x1="256"
gradientUnits="userSpaceOnUse"
id="id0"
>
<stop stop-color="#495c48" offset="0"></stop>
<stop stop-color="#9db891" offset=".490196"></stop>
<stop stop-color="#7b956a" offset="1"></stop>
</linearGradient>
<g id="Layer_x0020_1">
<path
fill="url(#id0)"
d="m310 512h-108c-16.4 0-31.9-6.5-43.7-18.3s-18.3-27.3-18.3-43.7v-261c0-29.8 24.2-54 54-54h123c30.3 0 55 24.2 55 54v261c0 16.4-6.5 31.9-18.3 43.7s-27.3 18.3-43.7 18.3zm-90-439v-34c0-23 9.9-39 24-39h24c13.5 0 24 17.1 24 39v34zm-33 48.36v-27.36c0-3.9 3.1-7 7-7h124c3.9 0 7 3.1 7 7v27.46c-2.63-.3-5.3-.46-8-.46h-123c-2.36 0-4.7.12-7 .36zm69 71.6c-33.94 54.87-38.25 93.49-29.7 116.4 5.82 15.59 17.8 23.39 29.7 23.39s23.88-7.8 29.7-23.39c8.55-22.91 4.24-61.53-29.7-116.4zm-42.77 121.27c-10.32-27.64-5.23-73.83 36.85-137.91.52-.84 1.22-1.57 2.09-2.14 3.22-2.12 7.54-1.22 9.65 1.99 42.17 64.16 47.27 110.4 36.95 138.06-8.09 21.68-25.39 32.52-42.77 32.52s-34.68-10.84-42.77-32.52zm102.27 126.87c-2.8 0-5.9-.4-9.3-1.3-.1 0-.1 0-.2 0-14-4.2-21.8-18.1-17.7-31.7.1-.4.3-.8.4-1.1.2-.4.4-.8.6-1.3.8-1.9 1.9-4.3 3.8-6.5 24.5-50.8 21.9-118.2 21.9-118.9-.1-3.5 2.3-6.5 5.7-7.2s6.8 1.3 7.9 4.6c3.3 9.6 11.2 41 15.2 73.2 5.1 42 1.8 69.7-9.9 82.2-3.7 4-9.6 8-18.4 8zm-5.6-14.8c8 2.2 11.7-.5 13.7-2.7 12.5-13.4 9.3-57.7 2.8-94.5-2.9 23.5-8.9 51.9-21.2 76.9-.3.7-.8 1.3-1.3 1.9-.6.6-1.3 2.1-1.8 3.4-.2.4-.4.8-.5 1.2-1.5 5.9 2.1 11.9 8.3 13.8zm-113.4 14.8c-8.9 0-14.8-4-18.4-7.9-11.7-12.5-15-40.2-9.9-82.2 3.9-32.2 11.8-63.6 15.2-73.2 1.1-3.3 4.5-5.2 8-4.6 3.4.7 5.8 3.8 5.6 7.3 0 .7-3.5 68 21.8 118.6 1.9 2.2 3 4.7 3.9 6.6.2.5.4.9.6 1.3s.3.7.4 1.1c4.1 13.6-3.7 27.5-17.7 31.7-.1 0-.1 0-.2 0-3.4.9-6.5 1.3-9.3 1.3zm-11.2-110.6c-6.3 36.5-9.3 79.8 3.1 93.1 2 2.2 5.7 4.8 13.7 2.7 6.3-1.9 9.9-7.9 8.4-13.8-.2-.4-.4-.8-.5-1.2-.5-1.2-1.2-2.7-1.8-3.4-.5-.5-1-1.1-1.3-1.8-12.7-24.5-18.7-52.3-21.6-75.6z"
></path>
</g>
</svg>
<div
class="tooltips absolute top-0 left-0 -translate-x-[150%] p-2 flex flex-col items-start gap-10 transition-all duration-300 group-hover:-translate-x-full"
>
<p
class="text-[#7b956a] font-semibold text-xl uppercase group-hover:delay-1000 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500"
>
Toner
</p>
<ul class="flex flex-col items-start gap-2">
<li
class="inline-flex gap-2 items-center justify-center group-hover:delay-200 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500"
>
<svg
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="3"
class="stroke-[#495c48]"
stroke="#000000"
fill="none"
viewBox="0 0 24 24"
height="10"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<p class="text-xs font-semibold text-[#495c48]">Hydration</p>
</li>
<li
class="inline-flex gap-2 items-center justify-center group-hover:delay-300 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500"
>
<svg
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="3"
class="stroke-[#495c48]"
stroke="#000000"
fill="none"
viewBox="0 0 24 24"
height="10"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<p class="text-xs font-semibold text-[#495c48]">
Protect Skin Barrier
</p>
</li>
<li
class="inline-flex gap-2 items-center justify-center group-hover:delay-400 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500"
>
<svg
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="3"
class="stroke-[#495c48]"
stroke="#000000"
fill="none"
viewBox="0 0 24 24"
height="10"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<p class="text-xs font-semibold text-[#495c48]">Reduce Winkles</p>
</li>
<li
class="inline-flex gap-2 items-center justify-center group-hover:delay-500 transition-all opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-500"
>
<svg
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="3"
class="stroke-[#495c48]"
stroke="#000000"
fill="none"
viewBox="0 0 24 24"
height="10"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<p class="text-xs font-semibold text-[#495c48]">Anti Inflammatory</p>
</li>
</ul>
</div>
</div>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.left-0{left:0px}.top-0{top:0px}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-\[100\]{z-index:100}.-mb-5{margin-bottom:-1.25rem}.flex{display:flex}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1 / 1}.w-\[180px\]{width:180px}.w-\[300px\]{width:300px}.shrink-0{flex-shrink:0}.-translate-x-\[150\%\]{--tw-translate-x:-150%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.snap-start{scroll-snap-align:start}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-10{gap:2.5rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.overflow-hidden{overflow:hidden}.rounded-md{border-radius:0.375rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.stroke-\[\#495c48\]{stroke:#495c48}.p-2{padding:0.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-none{line-height:1}.tracking-wider{letter-spacing:0.05em}.text-\[\#495c48\]{--tw-text-opacity:1;color:rgb(73 92 72 / var(--tw-text-opacity))}.text-\[\#7b956a\]{--tw-text-opacity:1;color:rgb(123 149 106 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.opacity-0{opacity:0}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:left-0::after{content:var(--tw-content);left:0px}.after\:top-8::after{content:var(--tw-content);top:2rem}.after\:-z-20::after{content:var(--tw-content);z-index:-20}.after\:h-1::after{content:var(--tw-content);height:0.25rem}.after\:w-full::after{content:var(--tw-content);width:100%}.after\:translate-x-1\/2::after{content:var(--tw-content);--tw-translate-x:50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\:translate-y-1\/2::after{content:var(--tw-content);--tw-translate-y:50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\:bg-\[\#7b956a\]::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(123 149 106 / var(--tw-bg-opacity))}.after\:opacity-0::after{content:var(--tw-content);opacity:0}.after\:transition-all::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\:duration-300::after{content:var(--tw-content);transition-duration:300ms}.group:hover .group-hover\:-translate-x-full{--tw-translate-x:-100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-1\/2{--tw-translate-x:50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.group:hover .group-hover\:delay-1000{transition-delay:1000ms}.group:hover .group-hover\:delay-200{transition-delay:200ms}.group:hover .group-hover\:delay-300{transition-delay:300ms}.group:hover .group-hover\:delay-500{transition-delay:500ms}.group:hover .group-hover\:duration-500{transition-duration:500ms}.group:hover .after\:group-hover\:w-full::after{content:var(--tw-content);width:100%}.group:hover .after\:group-hover\:origin-right::after{content:var(--tw-content);transform-origin:right}.group:hover .after\:group-hover\:-translate-x-1\/2::after{content:var(--tw-content);--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .after\:group-hover\:opacity-100::after{content:var(--tw-content);opacity:1}