Centered thumbnail titles on hover. Almost got it working with CSS. Need help

Hi

I got some help with CSS to get my thumbnail titles to appear on hover. However. It's fixed to a certain amount of pixels, instead of adapting to the size of the thumbnail. So when you change the width of the site, or view on mobile platforms, the title changes position. This also screws up the hovering area. Does anyone have an idea for a solution?

My site is https://simonolsson.squarespace.com. (will transfer to www.simonolsson.se)

And this is the CSS I use

#projectThumbs .project .project-title {
  position: relative;
  z-index: 9999;
  height: 126px;
  margin-top: -126px;
  margin-bottom: 0px;
  line-height: 9.6em;
  opacity: 0;
  -o-transition: opacity 0.3s ease-out;
  -ms-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}