How to add text/title to gallery grid image on hover AND caption to display under image on hover

Hi

I have added the code below to my portfolio page which allows me to have a caption display under the image on hover AND a description over the image on hover. I am now trying to replicate this on a gallery-grid-image, however nothing is working! I can get the caption to display under the image on hover, but can't get any text to display over the image at the same time. 

Code which works to add text over image when doing this on a portfolio page: (screenshot attached to show the effect I am looking for)

.grid-item[href*="/palmbaybungalow"]:before {
    content: "COMING SOON - IN CONSTRUCTION";
    color: red !important;
  font-family: 'ITC Caslon'!important;
    text-align: center !important;
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    opacity: 0;}
.grid-item[href*="/palmbaybungalow"]:hover:before {
    opacity: 1;}

How do I apply this to a simple gallery grid image so I get the same effect? Whilst maintaining the caption hover under image at the same time?

Thanks!

Charlotte 

Can you share link to page where you use Gallery? We can check easier