پیشنمایش زنده
کد 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-[7em] w-[7em] bg-[#FDEE00] rounded-full absolute bottom-full -left-[3.5em] group-hover:scale-[550%] z-[-1] duration-[400ms]"
></div>
<div
class="h-[6em] w-[6em] bg-[#7CFC00] rounded-full absolute bottom-full -left-[3.5em] group-hover:scale-[400%] z-[-1] duration-[400ms]"
></div>
<div
class="h-[5em] w-[5em] bg-[#007FFF] rounded-full absolute bottom-full -left-[3.5em] group-hover:scale-[300%] z-[-1] duration-[400ms]"
></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;
}
.-left-\[3\.5em\] {
left: -3.5em;
}
.bottom-\[1em\] {
bottom: 1em;
}
.bottom-full {
bottom: 100%;
}
.left-\[1em\] {
left: 1em;
}
.z-0 {
z-index: 0;
}
.z-20 {
z-index: 20;
}
.z-\[-1\] {
z-index: -1;
}
.m-auto {
margin: auto;
}
.h-\[5em\] {
height: 5em;
}
.h-\[6em\] {
height: 6em;
}
.h-\[7em\] {
height: 7em;
}
.h-\[8em\] {
height: 8em;
}
.w-\[15em\] {
width: 15em;
}
.w-\[5em\] {
width: 5em;
}
.w-\[6em\] {
width: 6em;
}
.w-\[7em\] {
width: 7em;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-\[1em\] {
border-radius: 1em;
}
.rounded-full {
border-radius: 9999px;
}
.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-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));
}
.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\:scale-\[300\%\] {
--tw-scale-x: 300%;
--tw-scale-y: 300%;
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-\[400\%\] {
--tw-scale-x: 400%;
--tw-scale-y: 400%;
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-\[550\%\] {
--tw-scale-x: 550%;
--tw-scale-y: 550%;
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));
}