Custom Divi Project Style

Written by Angelic Sanoy

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.

how to modify div project module

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>