Rollover mouse effect working on Featured Collection, Effect isn't working on Collection List

I am using a rollover effect on my products which can be seen on the homepage and within the vintage collection page. These pages use the Featured Product template. See example below:

I also wanted this effect on my collection pages that show all products such as the stackable and constellation page, however the text doesn’t appear on rollover, see example image below

This is the code I initially used to generate the effect in CSS at the bottom of Online Store-> Theme->Edit code->Assets->theme.css:

.aos-initialized [data-aos^=“fade”][data-aos^=“fade”].aos-animate {
opacity: 0;
transform: translate(0);
}
.product-item.one-quarter:hover .product-information.aos-init.aos-animate {
opacity: 1;
}

https://earthafinejewels.com

stowlu

Hi @Eartha ,

I checked and it shows fine, did you solve it?