Hey all! So I'm working on a pet profile that has tabs that expand when you hover over them. I accomplished the expanding part, but I'm having other issues with both.

With the left tab (pet spotlight), you can see that it is on top of the pet info, despite me setting the z-index on the tab to 2 and the z-index on the pet info to 999. I'm not sure why the z-index isn't working here. I can move things around and make the tab go underneath the description box, but not the pet info column.

On the right tab (pet treasure), what I want to do is have the tab expand and show three columns of my pet's treasure. However, I don't know how to set the width of the contents while having the background image (the lemon) stay the same width, if that makes sense. I've tried adding padding, but that just sort of made things funky.

If anyone has any advice on how to make these look right, I would very much appreciate it! <3

i think you need to apply the styling—the background, the z-index, the positioning & animation, etc—to , not .pet_spotlight, because the pet spotlight is INSIDE column 1.