Image Blocks with Sub Navigation on Hover

I'm working on a site that has a bunch of categories which I'd like to display graphically on the homepage to help the user navigate to the information most relevant to them.

Because there are quite a few, I have grouped many of them together.

The first 4 image blocks below demonstrate how a list of subcategories animates into position when a block is hovered.

The last 4 blocks demonstrate what happens when a block doesn't contain subcategories.

I'm trying to figure out the best way to make these elements look more interactive. I have a feeling some people might not intuitively understand how to use them.

Currently I am thinking about changing the main category titles into buttons and initiating subcategories on click instead of hover. However, I wanted to see what others suggest.