Masonry Gallery Caption

Hey annameis,
The overlay is created with the same div that is the caption field below the images, so you can’t have both at the same time.
But if you set the element to have the caption below the image and display the Title and Excerpt always, then you could move the title to the center of the image with a slight overlay and leave the caption at the bottom with no overlay with this css:

#top #wrap_all .av-flex-size .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content .av-masonry-entry-title.entry-title {
    position: absolute;
    transform: translate(12vw,-28vh);
    color: #fff;
}
#top #wrap_all .av-flex-size .av-masonry-entry.av-masonry-item-with-image .av-masonry-outerimage-container:before {
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  visibility: visible !important; 
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0,.5)!important; 
}

The expected results:
before mouse-over

mouse-over

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css to your Quick CSS field, please clear your browser cache and check.

Best regards,
Mike

Hi,
OK, please let us know if it works for you and we can close this thread.

Best regards,
Mike

Hi,
Thank you for the link to your site, for your last five items with no excerpt this css will center the title:

#top #wrap_all .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content .av-masonry-entry-title.entry-title {
    position: absolute;
    transform: translate(-1vw,-28vh);
    color: #fff;
    display: flex;
    justify-content: center;
    width: 100%;
}
#top #wrap_all .av-masonry-entry.av-masonry-item-with-image .av-masonry-outerimage-container:before {
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  visibility: visible !important; 
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0,.5)!important; 
}

But I know the you plan to have a excerpt, so based on the excerpt length of the first item, which is about half of the item’s height, this css would be what I recommend.

#top #wrap_all .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content .av-masonry-entry-title.entry-title {
    position: absolute;
    transform: translate(-1vw,-16vh);
    color: #fff;
    display: flex;
    justify-content: center;
    width: 100%;
}
#top #wrap_all .av-masonry-entry.av-masonry-item-with-image .av-masonry-outerimage-container:before {
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  visibility: visible !important; 
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0,.5)!important; 
}

as you add more excerpts to the other items try adjusting the negative sixteen of this code: transform: translate(-1vw,-16vh); to find the placement that you want. It would be better if your excerpts were all about the same length, because we need to use absolute position for the title.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike