Demo 01 – DIVI Masonry gallery

Example: 4 columns with responsive columns layout. Title and caption of images show on hover.

Addition to your CSS:
/* Change overlay effect on some images */
.masonry-grid-item:nth-child(2n+1) .et_overlay {
background: rgba(0,0,0,.9);
.masonry-grid-item:nth-child(2n+1) .et_overlay h3,
.masonry-grid-item:nth-child(2n+1) .et_overlay p.inpic {
color: #FFFFFF;
/* Place the title and caption at the bottom of the image */
.masonry-grid-item .et_pb_gallery_title.inpic {
position: absolute;
bottom: 45px;
.masonry-grid-item .et_pb_gallery_caption.inpic {
position: absolute;
bottom: 20px;