Search Divi Plus Documentation

Search for answers or browse our knowledge base.

< All Topics
Print

How to display title and caption on overlay in DP masonry gallery

To display text on overlay you need to turn the overlay on in the module setting.

Please use the following CSS code snippet in the Divi Theme Options Custom CSS area to display the title and caption.

.dipl_masonry_gallery_title_caption_wrapper {
position: absolute;
top: 70%;
left: 50%;
z-index: 99;
width: 100%;
padding: 10px;
visibility: hidden;
opacity: 0;
transform: translate(-50%, -50%);
transition: all 300ms ease;
}
.dipl_masonry_gallery_item:hover .dipl_masonry_gallery_title_caption_wrapper {
top: 50%;
visibility: visible;
opacity: 1;
}
.dipl_masonry_gallery_item .et_overlay:before {
display: none;
}

In the module setting Show Title and Caption for both gallery and lightbox.

Output:

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Previous How to hide post title in DP Blog Slider
Next How to change “dipl-team-member” slug from URL in DP team member