Thumbnail rollover effect on Summary Grid fail!

Hi guys

I'm trying to create a hover effect whereby the image fades out and the title appears.

When I hover over the title I completely lose the opacity effect!

I've cobbled together some code from lots of different places on this forum so it's probably super obvious where I'm going wrong.

The page url is https://damien-creagh.squarespace.com/drama-gallery

Would really appreciate some guidance.

Thanks!

Here's the code I'm using:

img.summary-thumbnail-image {
opacity: 1;
 transition: opacity .7s;
}

 img.summary-thumbnail-image.loaded:hover 
 { 
 opacity: 0.3; 
 }


  .sqs-block-summary-v2 .summary-item .summary-title { 
   transform: translateY(-10%);
 opacity: 0;
 transition: transform .6s ease-out, opacity .5s;
 hyphens: auto;
  text-align: center;
    position: absolute;
     left: 20%;
     top: 50%;
  width:70%;
     margin-left: auto;
     margin-right: auto;
  }


   .sqs-block-summary-v2 .summary-item:hover .summary-title
  { 
  transform: translateY(0);
 opacity: 1;
    text-align: center;
    position: absolute`enter code here`;
     left: 20%;
     top: 50%;
     margin-left: auto;
     margin-right: auto;
    width: 70%;
    hyphens:none;
  }

.sqs-block-summary-v2 .summary-item .summary-title a {
 font-size: 1em;
  z-index:20000 !important;
  font-size: 140%;
  color: #2a2a2a;
  display: block;
}

Hi Dear,

The effect still show opacity when I hover, did you get it solved