Add a overlay hover effect that reveals blog title over image?

Site URL: https://nagy-design.squarespace.com

Hey Folks, I'm trying to get a couple of features to have the same hover effect:

• Summary Block
• Blog page articles

The hover effect:
Reveal the title of the blog and add a slightly transparent overly with the color #805c60, with a zoom effect, along with drop shadow and slight movement. (https://www.loom.com/share/763f4336ca624fd8b1e915200aec2718)

Right now I've got the home page with summary block almost working. I used a brightness filter, but that just adds a black transparency layer on hover, and I need it to be the color mentioned above. I've tried a few variations of code but just can't seem to get it.

On the blog page, I want the same effect. I tried to apply it, but don't see any blog titles at all. When I reveal excerpt, it shows below. I can't seem to get a hover effect with the title.

Thoughts?

Here's the code I used for the home page section:

//ROUND Summary blocks
[data-section-id="62c474a24e68127a1a6a51f1"]{
  .sqs-gallery-design-grid .margin-wrapper {transition: box-shadow .5s, transform .5s; 
  border-radius: 500px;
  overflow: hidden;
  }
.sqs-gallery-design-grid .margin-wrapper:hover {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.2);  
  transform: translateY(-10px);}
.sqs-gallery-block-grid {
  overflow: visible;}
  
// Grid Gallery Zoom //
@media all and (min-width:770px){
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover img{
    transform: scale(1.1);
    -webkit-filter: brightness(10%);
    filter: brightness(20%);
  }
    
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover .image-slide-title{
    opacity: 2  
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide img{
    -webkit-transition: all 1s ease-in-out !important;
    -moz-transition: all 1s ease-in-out !important;
    -o-transition: all 1s ease-in-out !important;
    transition: all 1s ease-in-out !important;
  }
  .sqs-block-gallery .sqs-gallery-design-grid .image-slide-title{
    position: absolute;
    opacity: 0;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-transition: all 1s ease-in-out !important;
    -moz-transition: all 1s ease-in-out !important;
    -o-transition: all 1s ease-in-out !important;
    transition: all 1s ease-in-out !important;
    z-index:99999999999;
    font-size: 25px !important;
    font-weight: 500 !important;
    color: #805c60!important;
    padding: 10px;
  }
}
}
#block-4c5b6117782fd90b385e {
  margin-top:-250px;
}

and the blog page: 

//**PROJECTS PAGE**//
//rounded images
[data-section-id="62ba3b21816549635a744e9d"]{.blog-basic-grid a {
  border-radius: 500px!important;
  }}
  
  [data-section-id="62ba3b21816549635a744e9d"]{
 .sqs-block-gallery .sqs-gallery-design-grid .slide:hover img{
    transform: scale(1.1);
    -webkit-filter: brightness(10%);
    filter: brightness(20%);
  }}

//title overlay
.blog-basic-grid .blog-title {
  margin-top: -60px;
}

Can you check site url?

@tuanphan Ooops! Updated: nagy-design.squarespace.com PW: password

Thank you

Hover circle image >> show overlay + text?

Can you add some text & enable gallery caption first? I dont' see any text here

https://nagy-design.squarespace.com/home-design-concepts