Divi Image/Portfolio Gallery Overlay Display

add_overlay.css

/* Divi portfolio projects by category - gallery thumb image title text overlay */
/* 1. Add 'ds-hover-gallery' class to Divi portfolio gallery in page or post */
/* 2. Adjust gallery overlay zoom-icon-color and hover-overlay-color to 0 alpha */
/* 3. Add js and css code in Divi > Integration tab > head code  */

/* portfolio (project) galleries */
	.ds-hover-gallery .et_pb_portfolio_item {
        position: relative;
    }
	.ds-hover-gallery .et_pb_module_header {
        margin: 0 !important;
    }
    .ds-hover-gallery .et_overlay {
        z-index: 2;
    }
	.ds-hover-gallery .ds-project-text {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
		z-index:1;
        padding: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: rgba(255, 255, 255, .8);
        opacity: 0;
        -webkit-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }
    .ds-hover-gallery .et_pb_portfolio_item:hover .ds-project-text {
        opacity: 1;
    }

/* Divi image gallery thumb title text overlay */
/* 1. Add 'ds-hover-gallery' class to Divi image gallery in page or post */
/* 2. Adjust gallery overlay zoom-icon-color and hover-overlay-color to 0 alpha */
/* 3. Add js and css code in Divi > Integration tab > head code  */

    .ds-hover-gallery .et_pb_gallery_item {
        position: relative;
    }
	.ds-hover-gallery .et_pb_gallery_title {
        margin: 0 !important;
    }
    .ds-hover-gallery .et_overlay {
        z-index: 2;
    }
	.ds-hover-gallery .ds-gallery-text {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
		z-index:1;
        padding: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: rgba(255, 255, 255, .8);
        opacity: 0;
        -webkit-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }
    .ds-hover-gallery .et_pb_gallery_item:hover .ds-gallery-text {
        opacity: 1;
    }

add_overlay.js

/* Divi igallery item overlay (see .css file instructions) */

jQuery(function ($) {
	
	/* Full overlay with click (.ds-hover-gallery)*/
	$(document).ready(function () {
	   
		// portfolio gallery module
        	$(".ds-hover-gallery .et_pb_portfolio_item").each(function () {
			var newbox = $('<div class="ds-project-text"></div>');
          		$(this).find(".et_pb_module_header, .post-meta").appendTo( newbox );
			$(this).find(".et_portfolio_image").append(newbox);
        	});
		
		// image gallery module
		$(".ds-hover-gallery .et_pb_gallery_item").each(function () {
			var newbox = $('<div class="ds-gallery-text"></div>');
                	$(this).find(".et_pb_gallery_title, .et_pb_gallery_caption").appendTo( newbox );
			$(this).find(".et_pb_gallery_image a").append(newbox);
		});
	});
	/* end Full overlay with click */
	
});