Card by hoshikawamaki
#e8e8e8
HTML +TailwindCSS
1<div 2 class="relative overflow-hidden w-60 h-80 rounded-3xl cursor-pointer text-2xl font-bold bg-purple-400" 3> 4 <div class="z-10 absolute w-full h-full peer"></div> 5 <div 6 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" 7 ></div> 8 <div 9 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" 10 > 11 Nice to meet u,<br />Uiverse 12 </div> 13 <div class="w-full h-full items-center justify-center flex uppercase"> 14 hover me 15 </div> 16</div> 17
505 views
505 views
Uncannypotato69 24. February at 12:56
24. February at 12:56
hey man, cool effect. can you tell me how you made the circles blend into each other??
hoshikawamaki 6. March at 4:06
6. March at 4:06
@Uncannypotato69 The blending of those circles is just an illusion. I used a peer-hover to associate them with a sibling div that fills the parent container.
hoshikawamaki 6. March at 4:06
6. March at 4:06
@Uncannypotato69 When the hover state of the div is triggered, those circles will move to the position of 0 at the top-left and bottom-right corners of the parent container, and then their width and height become 100%
MIT License