Masonry blog title on hover 7.1

Site URL: https://graphicstructures.squarespace.com/projects

Hope someone can assist with this issue. 

My site - https://graphicstructures.squarespace.com/projects - pass: preview

Below is the code I am currently using for the title on hover however only the title text links and not the square itself. How would I like the whole block?

blog-masonry .blog-item-summary {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: all .3s ease;
    height: 100%;
}


.blog-masonry .masonry-ready .entry.is-loaded:hover .blog-item-summary {
  	cursor: pointer;
    opacity: 1;
    transition: all .3s ease;
  z-index:100;
}

.blog-masonry .masonry-ready .entry.is-loaded:hover img {opacity: 0.9;}

.blog-masonry .blog-item-summary {
    display: flex;
    place-items: center;
    justify-content: center;
}

.blog-title {background-color: rgba(255,255,255,0);
color:#000 !important;}

21 minutes ago, AltitudeDesign said:

Site URL: https://graphicstructures.squarespace.com/projects

Hope someone can assist with this issue. 

My site - https://graphicstructures.squarespace.com/projects - pass: preview

Below is the code I am currently using for the title on hover however only the title text links and not the square itself. How would I like the whole block?

blog-masonry .blog-item-summary {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: all .3s ease;
    height: 100%;
}


.blog-masonry .masonry-ready .entry.is-loaded:hover .blog-item-summary {
  	cursor: pointer;
    opacity: 1;
    transition: all .3s ease;
  z-index:100;
}

.blog-masonry .masonry-ready .entry.is-loaded:hover img {opacity: 0.9;}

.blog-masonry .blog-item-summary {
    display: flex;
    place-items: center;
    justify-content: center;
}

.blog-title {background-color: rgba(255,255,255,0);
color:#000 !important;}

 

It looks fine at the moment when I hover each item. Have you figured it out?

5 minutes ago, bangank36 said:

It looks fine at the moment when I hover each item. Have you figured it out?

The blocks don't click through though, only the piece of text. Can you help?

14 hours ago, bangank36 said:

Try

.blog-title a:after {
  content:'';
  width: 100vw;
  height: 100vh;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

}
.blog-item-summary {
  overflow:hidden;
}

Let me know how it goes on your site

You are a genius, worked perfect, thank you