Targeting items within product summary blocks for text overlays

Site URL: https://www.tonywoodhair.co.uk/shop

Hi! I’m trying to target specific items within a product summary block so I can make custom text appear on rollover/hover (so, the text would be declared in the CSS, rather than inherited).

So far, I’ve got this:

Quote

 

.sqs-gallery-design-autogrid-slide .summary-thumbnail-container::after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 52px;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  transition: opacity 0.42s;

}

.sqs-gallery-design-autogrid-slide:hover .summary-thumbnail-container::after
{
  opacity: 1;
}

 

This makes all items in summary blocks show the text ‘READ MORE’ on hover — now I’m trying to figure out how to target on a per-item basis, so I can change the text on each item. I can’t find the right mixture of CSS classes and HTML IDs!

Any help would be greatly appreciated. The page is here.

Thank you!

Here code for SHAMPOOS, CONDITIONERS, AND TREATMENTS TO PREPARE YOU FOR A RESTYLE.

nth-child(1) = first item

div#block-yui_3_17_2_1_1587426612980_3755 .summary-item-list .summary-item:nth-child(1):after {
  content: '– Read More –';
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 52px;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  transition: opacity 0.42s;
}
div#block-yui_3_17_2_1_1587426612980_3755 .summary-item-list .summary-item:nth-child(1):after
{
  opacity: 1;
}