Enhancing user interaction on your website by displaying project excerpt text when users hover over items in the Portfolio Module. This customization provides additional context and entices visitors to explore your projects further.
This article will guide you through the steps to reveal the project excerpt text in your Portfolio Module.
Prerequisites:
This customization requires having a Child theme for Divi installed and activated.
Move the Portfolio module from the parent theme to your child theme folder.
Go to WordPress Dashboard → Appearance → Theme Files Editor
Open the custom-FilterablePortfolio.php from your child theme folder
Find these lines of code:
<?php } else { ?>
<span class="et_portfolio_image">
<?php
$image_attrs = array(
'alt' => get_the_title(),
'width' => '400',
'height' => '284',
);
if ( ! empty( $post->featured_image ) ) {
$image_attrs['srcset'] = $post->featured_image . ' 479w, ' . $post->post_thumbnail . ' 480w';
$image_attrs['sizes'] = '(max-width:479px) 479px, 100vw';
}
$this->render_image( $post->post_thumbnail, $image_attrs );
?>
<?php echo et_core_esc_previously( $overlay ); ?>
</span>
<?php } ?>Replace it with this code:
<?php } else { ?>
<span class="et_portfolio_image">
<?php
$image_attrs = array(
'alt' => get_the_title(),
'width' => '400',
'height' => '284',
);
if ( ! empty( $post->featured_image ) ) {
$image_attrs['srcset'] = $post->featured_image . ' 479w, ' . $post->post_thumbnail . ' 480w';
$image_attrs['sizes'] = '(max-width:479px) 479px, 100vw';
}
$this->render_image( $post->post_thumbnail, $image_attrs );
?>
<?php echo et_core_esc_previously( $overlay ); ?>
<span class="dt-excerpt"><?php echo get_the_excerpt(); ?></span>
</span>
<?php } ?>For each Project, ensure that the Excerpt text is added by editing each of the Projects in WordPress Dashboard → Projects and filling in the Excerpt field for each project
Open the Portfolio module's settings by clicking on the Gear icon
Go to Advanced Tab → Custom CSS → Free Form CSS and add this CSS code:
selector .dt-excerpt {
z-index: -1;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: auto;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
text-align: center;
padding: 10px;
}
selector .et_portfolio_image:hover .dt-excerpt {
z-index: 3;
opacity: 1;
}
selector .et_overlay::before {
top: calc(50% + 20px);
}
The result can be seen in the screenshot below:
