How to make a focus effect in UI and gray out all elements but one

So I am trying to create an effect like this:

I was playing around with making some frame with size 1,0,1,0, making it black and 0.5 transparency but was having trouble making the actual UI element in my other GUI work and be the one UI that actually shows up normally. I was playing with ZIndex, display order, idk at first I made the full frame 0.5 transparency frame in two diff screenguis(one for my blackout frame and the other for the actual screengui that has the element I wanna show) then tried to put it in the screengui where I have the one button I wanna show but still wasn’t able to figure it out. Just wondeirng if anyone has any ideas?

Thanks!

Add an invisible black frame on top of the GUI with something like LayoutOrder 1, detect if the mouse is hovering over one of the purchase frames, if so set the LayoutOrder of the purchase frame to something like 2 and tween the black frame’s transparency to 0.5

1 Like

move to Help and Feedback > Art Design Support

  1. screengui zindex behavior has to be set to global!!!
  2. let’s say all of the frames in that shop have zindex of 1, it’s children will have a zindex of 2, and the fullscreen blackout frame will also have a zindex of 2 (won’t matter as it’s hidden for now)
  3. to focus a frame, add 2 to the frame and it’s children’s zindexes. then make the blackout frame visible.
  4. boom now it should be like this:
    grayed out frames - zindex of 1 or below.
    blackout frame - zindex of 2
    focus frame - zindex of 3 (4 for children)

sorry for the word spaghetti :spaghetti::spaghetti::spaghetti:, very rushed. maybe not the most performant but hopefully this helps though.

1 Like

Oops sorry I moved it, thanks though I’ll try the solutions out once I’m able to and mark the solution. Thanks!