Adding link to hover overlay + centering text/adjusting padding

Site URL: https://www.opalivory.com/

Hello! 

I have four in-line photos on the portfolio preview section of my website. I currently have them formatted to have a small square overlay appear centered over the photo when it's hovered over using Caption on Hover. 

I'm struggling with how to, first and foremost, get the text centered in the middle of the box. I'm not how sure how to describe it in the context of coding but if I were editing on illustrator, I would be adjusting the paragraph alignment. 

Secondly, I have links attached to each photo to take the user to the full portfolio link, however they're not actively clickable.

opalivory.com

website PW: Design2022

Any help would be greatly appreciated!!

Hi there,

There are some default margins and spacing applied to these blocks but these CSS rules should help get you in the right direction.

You can remove the media-query and set this behavior as the default as well.

.image-caption-wrapper:hover {
  display: flex !important;
  height: auto;
  justify-content: center;
}
@media screen and (min-width: 1025px) {
  .image-caption-wrapper {
    display: flex;
    justify-content: center;
    height: auto;
  }
}