CSS Hover on gallery , show caption text on photo

Site URL: https://www.relead.dk/forside-ny

Hi all,

Trying to make a hover function on our employee gallery, showing their contact info (caption) when hovering the mouse over image. 
Like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

But I am having a hard time controlling the placement of caption text. Also hiding the white space below each image. I only want 5px space between.

My code:

.gallery-grid-item-wrapper:hover .gallery-caption .gallery-caption-grid-simple {
  visibility: visible;
  opacity: 1;
}

.gallery-caption {
  visibility: hidden;
  opacity: 0;
}

Hopefully some of you can help me 🙂

Thanks

/Morten

I got this far... But all captions is showed on the first row. Because of the absolute position i guess.

code:

/* Gallery Block Customisation */
.gallery-caption {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top:0;
  background: rgba(29, 106, 154, 0.72);
  height: 268px;
  width: 398px;
  
}

.gallery-grid-item:hover .gallery-caption {
  visibility: visible;
  opacity: 1;
}

This works 🙂

/* Gallery Block Customisation */
.gallery-caption {

  position:absolute;
  top:0;
  visibility: hidden;
  opacity: 0;
  background: #E0E0DA;
  height: 90%;
  width: 100%;
  text-align: center;
  transition: opacity .2s, visibility .2s;
 
}

.gallery-grid-item:hover .gallery-caption {
  visibility: visible;
  opacity: 1;

}
.gallery-grid-item {
  position:relative;
}
.gallery-grid-wrapper {
  position:relative;
}