How to display product info on hover in Impact theme?

Store Design
1

How can I make it so that hovering over products on the homepage displays information, but when I’m on the collection page, I want the price and name to be displayed underneath the product at all times? I am using Impact theme. Thank you.

www.doglegsweden.com

Pass: Hundben2022

2
  1. Wrap these elements with a container element, such as a <div>, and assign it a class, for example, product-info-container.
  2. Add the following CSS code to your theme’s custom CSS section or CSS file:
/* Display product information underneath on collection page */
.collection-grid-item .product-info-container {
  display: block;
}

/* Hide product information on hover */
.collection-grid-item:hover .product-info-container {
  display: none;
}

/* Show product information on hover on the homepage */
.homepage-grid-item:hover .product-info-container {
  display: block;
}
​
3

It did not work, unfortunately.

Maybe I’m doing it wrong. Do you have any suggestions why it doesn’t work?

Thank you