Add hover effect to product image in grid view


I've removed the product title and choose option from the grid view of products but wanted to add some CSS for when a user hovers over each image. Ideally changing the background and border colour of the div that the product image sits in.

I added the following code to custom.css but this has added the border to the image (and some other div behind the image) but not the main product border like I was expecting have played around a little but haven't got the desired effect. Any ideas?

.product :hover {
    border: 1px solid #000000;

Many thanks, Harry