Custom hover effect working for image but stops when hovering over the overlayed text. How can I fix this?

I have been looking for a way to allow the hover effect to still work when it hovers over the text and not just the image.

The Site URL is this: https://www.thesqinstitute.com/interactive-labs

Here is the code I'm using on the page.

<style>

  .sqs-block-image .design-layout-fluid .fluid-image-container .content-fill img {
  
    transition : 0.4s;
    
    }
    
  .sqs-block-image:hover .design-layout-fluid .fluid-image-container .content-fill img {
  
    opacity : 0.5;
    transform : scale( 1.1 );
    
    }
    
  </style>

Please see the following for an observation.