How do I make hovering focus on an element (darkens everything around it)

Hey there everyone, I’ve been trying to create a hover effect like in Rivals where it darkens around the element. I want it to “zoom in” with a tween instead of just fading in, the video below perfectly shows what im aiming for


Help would be greatly appreciated!

Not sure how to do this either, possibly an imagelabel with a square in the middle? like a trasparent square in the middle surrounded with a white square, you can also do this with a frame and a UIStroke

Make an image label of a dark background with a cutout of the button and do that for every button. Then make it really big. Then make a script and every time the Mouse Entered event fires make the dark image label associated with that button become visible and tween to the correct size

Blurr your screen
The ui has a transparent black frame, then on each of those robux thingies u just have a white transparent frame and size it to ur liking

Can this be done with EditableImages?

Looks like a tween for the square “zoom in” along with a hovering picture.

I am presuming that you get a image with that is completely black except for that square in the middle. Lower its transparency a bit, then when ever someone hovers over it, do some math to tween it’s size down whilst keep it the proper position.

Hi there,

Here is a tutorial you can use for TweenService if you ever get stuck.