پیشنمایش زنده
کد HTML
<div
class="relative overflow-hidden w-60 h-80 rounded-3xl cursor-pointer text-2xl font-bold bg-purple-400"
>
<div class="z-10 absolute w-full h-full peer"></div>
<div
class="absolute peer-hover:-top-20 peer-hover:-left-16 peer-hover:w-[140%] peer-hover:h-[140%] -top-32 -left-16 w-32 h-44 rounded-full bg-purple-300 transition-all duration-500"
></div>
<div
class="absolute flex text-xl text-center items-end justify-end peer-hover:right-0 peer-hover:rounded-b-none peer-hover:bottom-0 peer-hover:items-center peer-hover:justify-center peer-hover:w-full peer-hover:h-full -bottom-32 -right-16 w-36 h-44 rounded-full bg-purple-300 transition-all duration-500"
>
Nice to meet u,<br />Uiverse
</div>
<div class="w-full h-full items-center justify-center flex uppercase">
hover me
</div>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.-bottom-32{bottom:-8rem}.-left-16{left:-4rem}.-right-16{right:-4rem}.-top-32{top:-8rem}.z-10{z-index:10}.flex{display:flex}.h-44{height:11rem}.h-80{height:20rem}.h-full{height:100%}.w-32{width:8rem}.w-36{width:9rem}.w-60{width:15rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.bg-purple-300{--tw-bg-opacity:1;background-color:rgb(216 180 254 / var(--tw-bg-opacity))}.bg-purple-400{--tw-bg-opacity:1;background-color:rgb(192 132 252 / var(--tw-bg-opacity))}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.peer:hover ~ .peer-hover\:-left-16{left:-4rem}.peer:hover ~ .peer-hover\:-top-20{top:-5rem}.peer:hover ~ .peer-hover\:bottom-0{bottom:0px}.peer:hover ~ .peer-hover\:right-0{right:0px}.peer:hover ~ .peer-hover\:h-\[140\%\]{height:140%}.peer:hover ~ .peer-hover\:h-full{height:100%}.peer:hover ~ .peer-hover\:w-\[140\%\]{width:140%}.peer:hover ~ .peer-hover\:w-full{width:100%}.peer:hover ~ .peer-hover\:items-center{align-items:center}.peer:hover ~ .peer-hover\:justify-center{justify-content:center}.peer:hover ~ .peer-hover\:rounded-b-none{border-bottom-right-radius:0px;border-bottom-left-radius:0px}