Masonry Grid Ignore Caption Spacing

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

Hello! I am trying to make my masonry grid ignore captions for spacing the images so that the space between images remain the same regardless of there being a caption to the image or not.

The two pictures I have attached show the current irregular spacing that comes when I caption an image and the second picture shows the regular spacing that I hope to achieve. I also want to move the text closer to the image that it is a caption for.

I hope someone can help!

https://www.dreamdescriptions.com/

password: temp6789

Adding this:

Quote

figure.gallery-masonry-item .gallery-masonry-item-wrapper:before {
    background-color: rgba(255,255,255,1);
    content: "Dream Descriptions";
    display: block;
    position: absolute;
    top: 100.25%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 1;
      font-size: 0.9rem;
}

Gave me what I wanted but now I need to figure out how to make the captions individual. Any clues?

Update:

 

Quote

.gallery-caption {
    position: absolute !important;
    top: 104%;
    left: 0%;
    transform: translate(0%, -6%);
    width: 100%;
    text-align:left;
    opacity: 0;
    transition: all .0s ease;
    background-color: none;
    height: 100%;
      opacity: 1;
}

.gallery-masonry-item:hover .gallery-caption {
    opacity: 1;
    transition: all .0s ease;
}

.gallery-caption-wrapper {
    display: flex;
    place-items: left;
    justify-content: left;
}

.gallery-caption {
    pointer-events: none;
}

The above code seems to be working as I intended and it also supports clickthrough. Viewing the site in the preview makes it seem like there is still non-uniform spacing horizontally and vertically in the beginning. But when I refreshed the actual website it is clear that the uneven spacing is gone. Then after some more refreshing it was also gone in the website editor.

I have captions turned on in this example, which is where I input the text.