1. HOT Divi Ultimate Header Plugin - More variety for your Divi header: https://header.diviultimate.com/

Solved Masonry portfolio not working

Discussion in 'Free Divi Community Forum' started by Alvaro96, Mar 1, 2020.

  1. Alvaro96

    Alvaro96 New Member

    HI, Thank you for having such an amazing support community!I would need help with Divi. I added this masonry portfolio that you recommended in one of your posts: https://divisoup.com/f26-masonry-filterable-portfolio-layout/

    The problem is that the hover effect, where the title and category should be showing, is not working.

    This is the CSS code:

    https://pastebin.com/FcbVFtqt

    This is the json code for the plug in:

    https://pastebin.com/NnCq2SfU

    I do not know whats going on and could not find any answer to this anywhere, any guidance would be much appreciated!
     
    1. AD Add tons of new icons for your Divi site. Free version available: https://divi.help/link-forums/divi-icons-pro.147/
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
    1. AD Power up your Divi sites with tons of new functionalities: https://divipowerful.divi.help/
  3. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to go to the Portfolio module settings > Elements & make sure Title & Categories are ticked.
     
  4. Alvaro96

    Alvaro96 New Member

    I did not have them clicked but they are supposed to appear in the hover effect not as in the image attached
     

    Attached Files:

    1. AD Power up your Divi sites with tons of new functionalities: https://divipowerful.divi.help/
  5. Divi.Help

    Divi.Help Administrator
    Staff Member

    From what I see from their demo, you need to have a Code Module with the below code:
    Code:
    <script>
    (function ($) {
    $(document).ready(function () {
    $(document).bind('ready ajaxComplete', function () {
    $(".ds-masonry-portfolio .et_pb_portfolio_item").each(function () {
    $(this).find(".et_pb_module_header, .post-meta").wrapAll('<div class="ds-portfolio-text"></div>');
    });
    });
    });
    })(jQuery);
    </script>
     
  6. Alvaro96

    Alvaro96 New Member

    Done but that doesnt seem to help...any other ideas? Thanks in advance
     
    1. AD Easily create popups / overlays for your Divi site: https://divi.help/link-forums/divi-overlay.144/
  7. Alvaro96

    Alvaro96 New Member

    I added a fullwifth code section with the css needed and the js you suggested but nothing has changed
     
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    In addition to the code, you need to enable this as well: Portfolio module settings > Elements > Title & Categories

    But from what I see, you still haven't add the JS code to your site.
     
    1. AD Instantly add 30+ custom Divi Modules. Free version available: https://divi.help/link-forums/divi-supreme.143/
  9. Leha Carpenter

    Leha Carpenter New Member

    Hi, Alvaro96: were you able to finally get this working? I am having what I think is the same problem, or at least, I am having a problem with the same masornry portfolio code. My problem is that the portfolio loads, but the images appear and then immediately disappear. Can you share how you got your page working? (It looks like it's working now.) Thank you! --Leha
     
  10. Leha Carpenter

    Leha Carpenter New Member


    Never mind--I figured it out. For some reason there was a "backface-visibility:hidden;" setting on the images that had not been there before. Not sure if Divi is doing this, or what, but thankfully easy to fix with a line of CSS. :)
     
    1. AD Awesome ways to display testimonials in your Divi site: https://divi.help/link-forums/testimonial-slider.148/
  11. jessicasler

    jessicasler New Member

    LEHA! Could you please help me with your solution? I am having the same problem, but I cant find "backface-visibility:hidden" anywhere. Any advise would be so so so appreciated thank you!!!
     
  12. Leha Carpenter

    Leha Carpenter New Member

    Hi, Jessi:

    I'm not sure if this will be the same for your setup, but these are the lines of code I added in the Divi Theme Options to fix the issue. Note that you would need to use your own page IDs:


    .page-id-17987 .et_pb_filterable_portfolio_0 .et_portfolio_image {
    backface-visibility: visible;
    }
    .page-id-71663 .et_pb_filterable_portfolio_0 .et_portfolio_image {
    backface-visibility: visible;
    }

    If you can inspect the page and find the CSS for .et_pb_filterable_portfolio_0 .et_portfolio_image, that should show the "hidden" setting, if this is in fact the same issue you're having. Good luck!

    Leha
     
    1. AD Free Divi premade layouts & sections for download: https://divi.help/link-forums/divi-den-freebies.145/
  13. jessicasler

    jessicasler New Member


    ohhhhhh my god, you sweet sweet angel you've saved my damn life. such an easy fix, thank you thank you thank you you are a brilliant genius from the heavens
     
  14. Leha Carpenter

    Leha Carpenter New Member

    Awww. :p

    Thanks, Jessi! Glad it worked out!

    L
     
    1. AD Awesome ways to display testimonials in your Divi site: https://divi.help/link-forums/testimonial-slider.148/

Recommended Divi Hosting