پیشنمایش زنده
کد HTML
<div class="relative w-full group">
<div
class="relative z-40 cursor-pointer group-hover:translate-x-8 group-hover:shadow-2xl group-hover:-translate-y-8 transition-all duration-500 bg-neutral-900 flex items-center justify-center h-32 w-32 mx-auto rounded-xl"
>
<svg
class="h-6 w-6 text-white/60"
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
<path d="M7 9l5 -5l5 5"></path>
<path d="M12 4l0 12"></path>
</svg>
</div>
<div
class="absolute border opacity-0 group-hover:opacity-80 transition-all duration-300 border-dashed border-sky-400 inset-0 z-30 bg-transparent flex items-center justify-center h-32 w-32 mx-auto rounded-xl"
></div>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.z-30{z-index:30}.z-40{z-index:40}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.h-32{height:8rem}.h-6{height:1.5rem}.w-32{width:8rem}.w-6{width:1.5rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-dashed{border-style:dashed}.border-sky-400{--tw-border-opacity:1;border-color:rgb(56 189 248 / var(--tw-border-opacity))}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.text-white\/60{color:rgb(255 255 255 / 0.6)}.opacity-0{opacity:0}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.group:hover .group-hover\:-translate-y-8{--tw-translate-y:-2rem;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-8{--tw-translate-x:2rem;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-80{opacity:0.8}.group:hover .group-hover\:shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}