add hover effect to reveal price and name of product

[RudyKurniawan]

I want to add a hover effect on my products, not only on the product page but also on the homepage. I'm working in the Dawn Theme and been trying to figure out how to get a hover effect that will reveal the price and the name of the product. I want it to be like on this website: https://www.something-familiar.com/products

If someone could help me, I would really appreciate it and it would help me out big time.

Thank you in advance!

[RudyKurniawan]

Thank you so much for replying, 

I am going to be honest with you and tell you that I'm really still a beginner at this and dont really know where to paste this code and couldnt make it work. The "grid-item.scss.liquid" doesnt show up in my assest. I did find Card-product.liquid in the snippets section that has to do with the products. when I paste the code tho it doesnt do anything. 

It's important to note that data-title and data-price are custom data attribute that you need to add to your HTML code.

to follow up on this where would i need to do this and how. 

Im sorry I might sound like an idiot but I could really use your help with this. 

Again thank you very much for the effort

[selenaa110]

use the "::before" and "::after" pseudo-elements to create the overlay and position them on top of the product image.