Custom Divi Project Style | Book Worm Head

Step 1: Adding Filteratable Portfolio Module

Set up your row width to 100% by going to Design tab
Add a ID named modified-portfolio under the advanced tab.

Step 2: Design the Divi Overlay Effect

You can twist the colors, sizes of the project overlay, text, title and filters by going to Design tab.

Add the css code in Divi > Theme Options > Custom CSS

/*Portfolio*/
#modified-portfolio .et_pb_portfolio_filters {
    width: 80%;
    margin: 2em auto;
}

#modified-portfolio .et_pb_grid_item {
    margin-right: 0;
}


#modified-portfolio .et_portfolio_image img {
    vertical-align: bottom;
    margin-bottom: 0;
    min-height: 300px;
    object-fit: cover;
}
#modified-portfolio .et_pb_grid_item {
    width: 25%;
    margin-bottom:0;
}

#modified-portfolio span.et_overlay {
  width: 70%;
   border:none;
}

#modified-portfolio .et_pb_grid_item h2, 
#modified-portfolio .et_pb_grid_item .post-meta {
    position: absolute;
    left: 7%;
     z-index:999;
     max-width: 300px;
}

.et_pb_grid_item h2,
.et_pb_grid_item .post-meta {
display:none;
}

.hoveractivated.et_pb_grid_item h2,
.hoveractivated.et_pb_grid_item .post-meta {
display:block;
}

#modified-portfolio .et_pb_grid_item h2 {  
	top: 10%;
}
#modified-portfolio .et_pb_grid_item .post-meta   { 
top: 23%;
}

@media(max-width:1024px){
	#modified-portfolio .et_pb_grid_item {
		width:50%;
	}
	
	#modified-portfolio span.et_overlay {
    min-width: 100%;
}
}

@media(max-width:414px){
	#modified-portfolio .et_pb_grid_item {
		width:100%;
	}
}

#modified-portfolio .et_overlay:before {
    top:auto;
    bottom:10%;
    left: 1.5em;
    margin: -16px 0 0 -16px;
    font-size: 32px;
    -webkit-transition: all .4s;

    
}

@media(max-width:761px) {
	#modified-portfolio .et_portfolio_image img {
		width:100vw;
	}
}
/* end Portfolio*/

Then let’s make the title and category working, add this snippet of jQuery in Divi > Theme Options > Integration > Body

<script> 
jQuery('#modified-portfolio .et_pb_portfolio_item').hover(
function(){ jQuery(this).addClass('hoveractivated') },
function(){ jQuery(this).removeClass('hoveractivated') }
)
</script>