پیشنمایش زنده
کد HTML
<div
class="div h-[8em] w-[15em] bg-white m-auto rounded-[1em] overflow-hidden relative group p-2 z-0"
>
<div
class="circle absolute h-[5em] w-[5em] -top-[2.5em] -right-[2.5em] rounded-full bg-[#FF5800] group-hover:scale-[800%] duration-500 z-[-1] op"
></div>
<button
class="text-[0.8em] absolute bottom-[1em] left-[1em] text-[#6C3082] group-hover:text-[white] duration-500"
>
<span
class="relative before:h-[0.16em] before:absolute before:w-full before:content-[''] before:bg-[#6C3082] group-hover:before:bg-[white] duration-300 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 group-hover:text-white duration-500 text-[1.4em]"
>
HEADING
</h1>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-right-\[2\.5em\] {
right: -2.5em;
}
.-top-\[2\.5em\] {
top: -2.5em;
}
.bottom-\[1em\] {
bottom: 1em;
}
.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-\[8em\] {
height: 8em;
}
.w-\[15em\] {
width: 15em;
}
.w-\[5em\] {
width: 5em;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-\[1em\] {
border-radius: 1em;
}
.rounded-full {
border-radius: 9999px;
}
.bg-\[\#FF5800\] {
--tw-bg-opacity: 1;
background-color: rgb(255 88 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-300 {
transition-duration: 300ms;
}
.duration-500 {
transition-duration: 500ms;
}
.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-\[800\%\] {
--tw-scale-x: 800%;
--tw-scale-y: 800%;
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\: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));
}