پیشنمایش زنده
کد HTML
<div
class="cursor-pointer group overflow-hidden p-5 duration-1000 hover:duration-1000 relative w-64 h-64 bg-neutral-800 rounded-xl"
>
<div
class="group-hover:-rotate-45 bg-transparent group-hover:scale-150 -top-12 -left-12 absolute shadow-yellow-800 shadow-inner rounded-xl transition-all ease-in-out group-hover:duration-1000 duration-1000 w-24 h-24"
></div>
<div
class="group-hover:rotate-45 bg-transparent group-hover:scale-150 top-44 left-14 absolute shadow-red-800 shadow-inner rounded-xl transition-all ease-in-out group-hover:duration-1000 duration-1000 w-24 h-24"
></div>
<div
class="group-hover:-rotate-45 bg-transparent group-hover:scale-150 top-24 left-56 absolute shadow-sky-800 shadow-inner rounded-xl transition-all ease-in-out group-hover:duration-1000 duration-1000 w-24 h-24"
></div>
<div
class="group-hover:-rotate-45 bg-transparent group-hover:scale-150 top-12 left-12 absolute shadow-red-800 shadow-inner rounded-xl transition-all ease-in-out group-hover:duration-1000 duration-1000 w-12 h-12"
></div>
<div
class="group-hover:rotate-45 bg-transparent group-hover:scale-150 top-12 left-12 absolute shadow-green-800 shadow-inner rounded-xl transition-all ease-in-out group-hover:duration-1000 duration-1000 w-44 h-44"
></div>
<div
class="group-hover:rotate-45 bg-transparent group-hover:scale-150 -top-24 -left-12 absolute shadow-sky-800 shadow-inner rounded-xl transition-all ease-in-out group-hover:duration-1000 duration-1000 w-64 h-64"
></div>
<div
class="group-hover:-rotate-45 bg-transparent group-hover:scale-150 top-24 left-12 absolute shadow-sky-500 shadow-inner rounded-xl transition-all ease-in-out group-hover:duration-1000 duration-1000 w-4 h-4"
></div>
<div
class="w-full h-full shadow-xl shadow-neutral-900 p-3 bg-neutral-600 opacity-50 rounded-xl flex-col gap-2 flex justify-center"
>
<span class="text-neutral-50 font-bold text-xl italic">Explore More</span>
<p class="text-neutral-300">
Dive into curated collections, traverse user-friendly interfaces, and let
curiosity guide your exploration.
</p>
</div>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-left-12 {
left: -3rem;
}
.-top-12 {
top: -3rem;
}
.-top-24 {
top: -6rem;
}
.left-12 {
left: 3rem;
}
.left-14 {
left: 3.5rem;
}
.left-56 {
left: 14rem;
}
.top-12 {
top: 3rem;
}
.top-24 {
top: 6rem;
}
.top-44 {
top: 11rem;
}
.flex {
display: flex;
}
.h-12 {
height: 3rem;
}
.h-24 {
height: 6rem;
}
.h-4 {
height: 1rem;
}
.h-44 {
height: 11rem;
}
.h-64 {
height: 16rem;
}
.h-full {
height: 100%;
}
.w-12 {
width: 3rem;
}
.w-24 {
width: 6rem;
}
.w-4 {
width: 1rem;
}
.w-44 {
width: 11rem;
}
.w-64 {
width: 16rem;
}
.w-full {
width: 100%;
}
.cursor-pointer {
cursor: pointer;
}
.flex-col {
flex-direction: column;
}
.justify-center {
justify-content: center;
}
.gap-2 {
gap: 0.5rem;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-xl {
border-radius: 0.75rem;
}
.bg-neutral-600 {
--tw-bg-opacity: 1;
background-color: rgb(82 82 82 / var(--tw-bg-opacity));
}
.bg-neutral-800 {
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}
.bg-transparent {
background-color: transparent;
}
.p-3 {
padding: 0.75rem;
}
.p-5 {
padding: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
.text-neutral-300 {
--tw-text-opacity: 1;
color: rgb(212 212 212 / var(--tw-text-opacity));
}
.text-neutral-50 {
--tw-text-opacity: 1;
color: rgb(250 250 250 / var(--tw-text-opacity));
}
.opacity-50 {
opacity: 0.5;
}
.shadow-inner {
--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.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);
}
.shadow-green-800 {
--tw-shadow-color: #166534;
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-neutral-900 {
--tw-shadow-color: #171717;
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-red-800 {
--tw-shadow-color: #991b1b;
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-sky-500 {
--tw-shadow-color: #0ea5e9;
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-sky-800 {
--tw-shadow-color: #075985;
--tw-shadow: var(--tw-shadow-colored);
}
.shadow-yellow-800 {
--tw-shadow-color: #854d0e;
--tw-shadow: var(--tw-shadow-colored);
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-1000 {
transition-duration: 1000ms;
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.hover\:duration-1000:hover {
transition-duration: 1000ms;
}
.group:hover .group-hover\:-rotate-45 {
--tw-rotate: -45deg;
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\:rotate-45 {
--tw-rotate: 45deg;
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\:scale-150 {
--tw-scale-x: 1.5;
--tw-scale-y: 1.5;
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\:duration-1000 {
transition-duration: 1000ms;
}