How to Show Title and Meta on Hover in Divi Portfolio Module

Oct 30, 2020 | Blog, Divi Tutorial | 0 comments

In this article I will share the steps to show the title and meta on hover in the Divi Portfolio module overlay.

By default the title and the categories show at the bottom of the image in the portfolio module. However with just a few lines of code we can move them in to the overlay.

Here is a preview of how it will look at the end.

Show Title and Meta on Hover in Divi Portfolio Module

Lets get started.

Add CSS Class to Divi Portfolio Module

The first step is to add a custom CSS Class to the Portfolio module. We use a custom css class to target our code so that the code does not affect any other content on the website.

Open the Portfolio Module Settings > Advanced > CSS ID & Classes > CSS Class and then add the class lwp-overlay-portfolio. If you are not sure where to add the class then here is a screenshot to help you.

CSS Class to show title on hover in Divi portfolio module

Add jQuery Code to move Title and Meta on Overlay

Next go to your WordPress Dashboard > Theme Options > Integration > Add code to the < head > of your blog. And paste the code below there.

<script>
jQuery(function($) {
    $(document).ready(function() {
        $('.lwp-overlay-portfolio .et_pb_portfolio_item').each(function() {
            var header = $(this).find(".et_pb_module_header");
            var meta = $(this).find(".post-meta");
            header.add(meta).wrapAll('<div class="portfolio-wrapper"></div>');
            var wrapper = $(this).find(".portfolio-wrapper");
            var overlay = $(this).find(".et_overlay");
            $(wrapper).appendTo(overlay);
        });
    });
    $(document).ajaxSuccess(function() {
        $('.lwp-overlay-portfolio .et_pb_portfolio_item').each(function() {
            var header = $(this).find(".et_pb_module_header");
            var meta = $(this).find(".post-meta");
            header.add(meta).wrapAll('<div class="portfolio-wrapper"></div>');
            var wrapper = $(this).find(".portfolio-wrapper");
            var overlay = $(this).find(".et_overlay");
            $(wrapper).appendTo(overlay);
        });
    });
});
</script>

Here is a screenshot of where you need to add the code.

Divi Theme Options jquery code to change show title on hover divi portfolio

This code will move the title and categories on the overlay in the Divi Portfolio module. But the title will be aligned to the top and left edge of the image.

We can use some custom css to vertically center the text on the image and also remove the icon from the overlay.

Add CSS Code to Theme Options

To improve the styles and hide the icon go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and add the following code.

.lwp-overlay-portfolio .portfolio-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.lwp-overlay-portfolio .et_overlay:before {
    display: none;
}

If you are not sure where to add the code then please have a look at the screenshot below.

Divi Custom CSS Theme Options

This code will vertically center the text in the overlay of the portfolio module and hide the overlay icon.

If you want to horizontally center the text or change any other styles then you can do so directly in the Module Settings > Design > Title Text or Meta Text. The color for the Overlay can be adjusted in Design Tab > Overlay toggle in the module settings.

If you want the text to be closer to the edges then you can adjust the width:80% value in the code.

Next you can check another Divi Tutorial

Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox. Leave a comment below if you found this helpful or have any questions related to this tutorial.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Affordable Web Hosting With Great Customer Service

Starting At Just $1.44/Month