Adding dynamic interactions to your website can significantly enhance user engagement and experience. One effective way to achieve this is by displaying project excerpt text when users hover over items in the Filterable Portfolio Module.
This customization provides additional context and information at a glance, making your portfolio more interactive and informative.
This guide will walk you through the steps to enable hover effects that reveal the project excerpt text in your Filterable Portfolio Module.
Prerequisites:
This customization requires having a Child theme for Divi installed and activated.
Move the Filterable 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:
if ( '' !== $thumb ) :
?>
<a href="<?php echo esc_url( $permalink ); ?>">
<span class="et_portfolio_image">
<?php print_thumbnail( $thumb, $thumbnail['use_timthumb'], $titletext, $width, $height ); ?>
<?php
if ( 'on' !== $fullwidth ) {
echo et_core_esc_previously( $overlay_output ); }
?>
</span>
</a>
<?php
endif;Replace those lines with:
if ( '' !== $thumb ) :
?>
<a href="<?php echo esc_url( $permalink ); ?>">
<span class="et_portfolio_image">
<?php print_thumbnail( $thumb, $thumbnail['use_timthumb'], $titletext, $width, $height ); ?>
<?php
if ( 'on' !== $fullwidth ) {
echo et_core_esc_previously( $overlay_output ); }
?>
<span class="dt-excerpt"><?php echo get_the_excerpt(); ?></span>
</span>
</a>
<?php
endif;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);
}(optional) Add styling for the new Excerpt text by opening the Filterable Portfolio module's settings and adding this CSS code to Advanced Tab → Custom CSS → Free Form CSS
selector p.project-excerpt {
color: black;
padding: 10%;
text-align: center;
position: absolute;
bottom: 25px;
}
The result can be seen in the screenshot below:
