search

LordCat / lordcat.github.com

1 stars 0 forks source link

issue on hovering effect on the globes. #1

Closed AtlasWiki closed 1 month ago

AtlasWiki commented 1 month ago

Looks like hovering over one globe, applies the hover effect to all globes. This could be an issue determined with how the "group" utilities in tailwind are used.

LordCat commented 1 month ago

Thank you from bring this to my attention. After investigating your suggestion, I've identified the issue to lay in the fact I'm calling a reference to the video which updates when you hover off and change state in the Moi Mosaic_Display.tsx <video ref={el => { if (el) { el.src = videoCache[item.videoUrl].src; el.load(); } }} className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-auto min-h-full object-cover transition-all duration-300 ease-in-out group-hover:w-[120%] group-hover:h-[120%]" loop muted autoPlay playsInline />

I have made the necessary modifications to <video key={item.videoUrl} className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-auto min-h-full object-cover transition-all duration-300 ease-in-out group-hover:w-[120%] group-hover:h-[120%]" loop muted playsInline autoPlay key={item.videoUrl} />

LordCat commented 1 month ago

I have pushed the fix to the main deployment branch. All seems to be working fine. Please let me know if you spot any more issues.

Thank you for your contribution!