Help trying to add Text on image and Expansion of Image

Hello I am currently trying to customize my site and I like the format of the page and how my pictures are laid out (currently in the Grid:Masonry gallery style) but I do wish I was able to open up the images as its possible in the “Grid:Strips” gallery style format. Is there a way to add code for this?  Also I would love to be able to add the bio of the image into the picture when you hover over the picture such as in this photographers site (https://www.calebknueven.com). I also want to disable right click on my photos. 

My site is https://johanamaro.com

You mean

Hover image >> Show an overlay + text over image?

Click Image >> Show big image in lightbox?

Yes exactly this sorry I'm not very knowledgeable in coding and css.

https://johanamaro.com/

To achieve this, you need to enable Gallery Caption + edit some images and add some text first, then we can give code to achieve your request

With some bigger version on click, when you edit Section >> It has an option "Lightbox" somewhere, I think it is under Captions option, you can check there

Thank you I added the lightbox I had not noticed that before hand. I also turned on captions so that code can be created for the captions. By the way I used your guide on disabling right click which I found on your site. 

You can use this code to Website > Website Tools > Custom CSS

body.homepage {
/* Gallery hover - with No Link */
figure[class*="gallery"]:not(.gallery-slideshow-item) {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
div[class*="-item-wrapper"]:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}

Thank you it worked for giving me the bio on the picture but now the light box doesn't seem to want to work when clicking on the the image. The lightbox setting under Gallery Caption is still turned on.