پیشنمایش زنده
کد HTML
<div
class="div h-[8em] w-[15em] bg-white m-auto rounded-[1em] relative group p-2 z-0 overflow-hidden"
>
<div
class="h-full w-[20%] bg-[#FDEE00] absolute left-0 bottom-full z-[-1] group-hover:translate-y-full duration-[400ms]"
></div>
<div
class="h-full w-[20%] bg-[#7CFC00] absolute left-[20%] top-full z-[-1] group-hover:-translate-y-full duration-[400ms] delay-[50ms]"
></div>
<div
class="h-full w-[20%] bg-[#007FFF] absolute left-[40%] bottom-full z-[-1] group-hover:translate-y-full duration-[400ms] delay-[100ms]"
></div>
<div
class="h-full w-[20%] bg-[#FF5800] absolute left-[60%] top-full z-[-1] group-hover:-translate-y-full duration-[400ms] delay-[150ms]"
></div>
<div
class="h-full w-[20%] bg-[#FF66CC] absolute left-[80%] bottom-full z-[-1] group-hover:translate-y-full duration-[400ms] delay-[200ms]"
></div>
<button
class="text-[0.8em] absolute bottom-[1em] left-[1em] text-[#6C3082] group-hover:text-white duration-100"
>
<span
class="relative before:h-[0.16em] before:absolute before:w-full before:content-[''] before:bg-[#6C3082] group-hover:before:bg-white duration-100 before:bottom-0 before:left-0"
>More Info</span
>
<i class="fa-solid fa-arrow-right"></i>
</button>
<h1
class="z-20 font-bold font-Poppin text-[1.4em] group-hover:text-white duration-100"
>
HEADING
</h1>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.bottom-\[1em\] {
bottom: 1em;
}
.bottom-full {
bottom: 100%;
}
.left-0 {
left: 0px;
}
.left-\[1em\] {
left: 1em;
}
.left-\[20\%\] {
left: 20%;
}
.left-\[40\%\] {
left: 40%;
}
.left-\[60\%\] {
left: 60%;
}
.left-\[80\%\] {
left: 80%;
}
.top-full {
top: 100%;
}
.z-0 {
z-index: 0;
}
.z-20 {
z-index: 20;
}
.z-\[-1\] {
z-index: -1;
}
.m-auto {
margin: auto;
}
.h-\[8em\] {
height: 8em;
}
.h-full {
height: 100%;
}
.w-\[15em\] {
width: 15em;
}
.w-\[20\%\] {
width: 20%;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-\[1em\] {
border-radius: 1em;
}
.bg-\[\#007FFF\] {
--tw-bg-opacity: 1;
background-color: rgb(0 127 255 / var(--tw-bg-opacity));
}
.bg-\[\#7CFC00\] {
--tw-bg-opacity: 1;
background-color: rgb(124 252 0 / var(--tw-bg-opacity));
}
.bg-\[\#FDEE00\] {
--tw-bg-opacity: 1;
background-color: rgb(253 238 0 / var(--tw-bg-opacity));
}
.bg-\[\#FF5800\] {
--tw-bg-opacity: 1;
background-color: rgb(255 88 0 / var(--tw-bg-opacity));
}
.bg-\[\#FF66CC\] {
--tw-bg-opacity: 1;
background-color: rgb(255 102 204 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.p-2 {
padding: 0.5rem;
}
.text-\[0\.8em\] {
font-size: 0.8em;
}
.text-\[1\.4em\] {
font-size: 1.4em;
}
.font-bold {
font-weight: 700;
}
.text-\[\#6C3082\] {
--tw-text-opacity: 1;
color: rgb(108 48 130 / var(--tw-text-opacity));
}
.delay-\[100ms\] {
transition-delay: 100ms;
}
.delay-\[150ms\] {
transition-delay: 150ms;
}
.delay-\[200ms\] {
transition-delay: 200ms;
}
.delay-\[50ms\] {
transition-delay: 50ms;
}
.duration-100 {
transition-duration: 100ms;
}
.duration-\[400ms\] {
transition-duration: 400ms;
}
.before\:absolute::before {
content: var(--tw-content);
position: absolute;
}
.before\:bottom-0::before {
content: var(--tw-content);
bottom: 0px;
}
.before\:left-0::before {
content: var(--tw-content);
left: 0px;
}
.before\:h-\[0\.16em\]::before {
content: var(--tw-content);
height: 0.16em;
}
.before\:w-full::before {
content: var(--tw-content);
width: 100%;
}
.before\:bg-\[\#6C3082\]::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(108 48 130 / var(--tw-bg-opacity));
}
.before\:content-\[\'\'\]::before {
--tw-content: "";
content: var(--tw-content);
}
.group:hover .group-hover\:-translate-y-full {
--tw-translate-y: -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-y-full {
--tw-translate-y: 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\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.group:hover .group-hover\:before\:bg-white::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}