How to make hover cover an image?

Question

css

When the background does not cover the picture
It is necessary like this:

Code:
https://jsfiddle.net/0jqfm42e/

Answer 1

This is done in two layers. On the first - a picture, a title and all related information. On the second - buttons add to cart, share and like. Make the second layer initially hidden, draw it on top ( position: absolute), hide ( opacity: 0; visibility: hidden;). When ( :focus, :focus-withinand :hover) show ( opacity: 1; visibility: visible;).
Perhaps adding JS to see if the cursor has been hovered over and then cleared from the card (in that order) to hide the second layer (do .blurif the user is focused).