Element not taking up space when hidden

When hovering over an animated element (only in Safari, works fine other browsers) the element does not take up space until it is visible. I would like for the element to take up space so that when hovered, the surrounding div does not expand. Please see attached video link.
Video


Here is my public share link: LINK
(how to access public share link)

Set it to absolute or use opacity.

When set to absolute, the surrounding div then ignores the height so things get cut off. I don’t think changing opacity wouldn’t allow the sliding animation to work properly.

Move it to where you want it to slide from and make it 0% opacity.
Then make the sliding animation and use opacity same way you would use hide/show.