Change colour of column background image on hover

I’m working on this site:

I would like to change the colour of the side by side background images “Adult Classes” and “Kids Programs” on hover and make the whole column clickable - inspired by this site:

Thanks in advance for advice!

You can do it with an old school CTA, but it’s really annoying - and it wont get the zoom affect it will be the one on the front page of the xtheme home page. - Church, resturant etc

The other way is with Essential Grid, the addon that comes with Xtheme and you create the grid and insert that onto the page.

What’s on the homepage of X theme highlighting the church/restaurant would work. I just want something dynamic to happen on those two column/images. How was that done?

Any one come up with a solution here? I would love to be able to change the background upper layer color on hover.