GRID LAYOUT: How to hover overlap div elements


I’m having troubles understanding how to make divs in a grid layout overlap each other on mouse hover. Please see the screens attached.

Here is my site Read-Only: Webflow - iGMS

I figured it out on my own.

What I had to do:
Switch from grid layout to flex.
Use a separate div container for each row (3 in total)
Give each container a fixed height.
Set z-index for each container, top container having value of 3 and bottom one a value of 1.