Divs within divs within a gridbox

I’m working with the grid. What I would like is to have an unselected state and a hover state: so two divs on top of each other. I have worked out how to do this not in a grid but when I try and put this structure in to a grid I get confused. The images below show the unselected and hover states that I am after with one of the grid boxes.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)