Responsive Double Overlay for Masonry

I am trying to get my responsive Masonry to work with double overlay in WordPress. Currently, I have managed to get the dark overlay size match perfectly with the thumbnail image. I have also added texts which appears on top of the overlay, hence double overlay on a thumbnail.

The issue is that when I resize the window or view the blog posts through mobile, the overlay hover size exceeds the thumbnail size whiles on some thumbnails the overlay position is completely off.

How do I ensure that the double overlays (black transparent hover and texts) stay in the same position and scale properly along with the thumbnail?

Here is my code:

.title, .excerpt, .date {
  position: absolute;
  z-index: 1;
}

.title {
bottom: 150px;
}

.date {
bottom: 130px;
}

.excerpt {
bottom: 100px;
}

.overlay:after {
  content: '';
  position: absolute;
  width: 362px;
  height: 362px;
  top: 5px; 
  left: 1;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.overlay:hover:after {
  opacity:1;
}

Update: I have also added overlay into my media queries but it doesn’t take the overlay into effect like my thumbnails do.

Update 2: Dantcho's code fixes the issue to make the overlay responsive with the thumbnail. The next issue is that because the overlay is set to 100%, when I use padding: 10px; it makes the grid bigger, but I can't make it smaller. The thumbnail has padding, and I'd like to keep the padding that way.

Update 3: Not sure if this is viable fix for long term but either way, it works. This will keep the overlay responsive, and I adjusted the top, left, width and height a little bit to fit over the thumbnail.

.overlay:after {
  content: '';
  position: absolute;
  width: 97.5%;
  height: 97.5%;
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

Update 4: I found a better alternative, this will prevent the overlay going slightly out of place when resizing the browser.

.overlay:after {
  content: '';
  position: absolute;
  display: block;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

Cheers!

Change this:

.overlay:after {
  content: '';
  position: absolute;
  width: 362px;
  height: 362px;
  top: 5px; 
  left: 1;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

to this:

.overlay:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

Hope this fixes your issue. If not feel free to ask!