Hover on Summary Block

Hi friends! I've been struggling for almost a week with adding a proper hover to my summary block. I'd like it to look like on this page: https://www.sandranam.me/work 

Password: 7u5PY6B6C

But now the hover on my summary block is really buggy (see at the bottom of the page):  https://www.sandranam.me/work/squarespace-launch-it

Here's the code I've been using:

.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content {
  font-size: 24px!important;
  color: white!important;
  font-weight: regular!important;
  font-family:'orpheus pro'!important;
}

.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content {
  position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0!important;
    transition: all 1s!important;
}

.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content:hover {
    opacity: 1!important;
    transition: all 0.1s;
}

.summary-thumbnail-outer-container > a:after {
  content: "";
  background: inherit;
  background-color: rgba(0, 0, 0, .3); 
  backdrop-filter: blur(5px);
  transition:2s; 
  height: 80%; 
  width: 80%; 
  margin:auto!important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.1s;
}

.summary-thumbnail-outer-container:hover a:after {
  opacity: 1;
  transition: all 0.1s;
}

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) {
  position: relative !important;
  transform: unset !important;
}

I'll be extremely grateful if you can help me identify where the problem is. 

I see both look same

You mean need show title on hover?

Yes! The issue with the summary block is that when you hover over a thumbnail, the darken/blur filter appears without the title. On the other hand, the title only appears without a filter when hovering specifically on the middle area of the thumbnail. This mismatch makes it seem like the filter and the title aren't synchronized properly.

Adding a screen recording

@tuanphan This worked perfectly! Thank you so much!!