Woocommerce Storefront Adding a hover effect to product categories on Home Page

Question

I would like to add a hover effect on the Home Page like here: http://demo.woothemes.com/?name=galleria&_ga=1.242371650.1503770507.1481544136

I found a way to add a hover effect in product

/* Make product in categories glow on hover */
.woocommerce-page ul.products li.product:hover {
box-shadow: 0 0 20px #1e73be;
}

But I can't find a way to make this for product categories in the home section.

I use the Storefront Child Theme Master to Edit the Storefront Themes: https://github.com/stuartduff/storefront-child-theme

Any kind of help is appreciated,

Regards,

Answer 1

UPDATED ANSWER:

You will first need to alter the position and visibility of the h3 titles.

ul.products li.product.product-category h3 {
   top: 0;
   width: 100%;
   height: 100%;
   position: absolute;
   opacity: 0;
   padding-top: 25%;
   background: rgba(255,255,255,.6);
}

And then make it visible on hover.

ul.products li.product.product-category:hover h3 {
   opacity: 1;
}

That's as close as I can get to the demo without going into media queries :/