1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

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 Alvaro96, Mar 1, 2020
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
    #2 Divi.Help, Mar 1, 2020
  3. Alvaro96

    Alvaro96 New Member

    #3 Alvaro96, Mar 1, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to go to the Portfolio module settings > Elements & make sure Title & Categories are ticked.
     
    #4 Divi.Help, Mar 1, 2020
  5. 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:

    #5 Alvaro96, Mar 1, 2020
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  6. 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:
    Log In or Sign Up to view this code.
     
    #6 Divi.Help, Mar 1, 2020
  7. Alvaro96

    Alvaro96 New Member

    Done but that doesnt seem to help...any other ideas? Thanks in advance
     
    #7 Alvaro96, Mar 1, 2020
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  8. Alvaro96

    Alvaro96 New Member

    I added a fullwifth code section with the css needed and the js you suggested but nothing has changed
     
    #8 Alvaro96, Mar 1, 2020
  9. 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.
     
    #9 Divi.Help, Mar 1, 2020
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  10. 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, Jun 4, 2020
  11. 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. :)
     
    #11 Leha Carpenter, Jun 4, 2020
    1. PRO MEMBER PERKS Divi.Help Header AI Generator - Try the power of AI to generate a custom Divi header for you:Try Now
  12. 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 jessicasler, Jun 29, 2020
  13. 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
     
    #13 Leha Carpenter, Jun 29, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  14. 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 jessicasler, Jul 2, 2020
  15. Leha Carpenter

    Leha Carpenter New Member

    Awww. :p

    Thanks, Jessi! Glad it worked out!

    L
     
    #15 Leha Carpenter, Jul 2, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade dynamic background hover design for your Divi site without using any plugins:View Demo
  16. Martyprod

    Martyprod New Member

    Hello, i see that some here had the same problem than me , but it seems i did something else wrong. even by trying the "trick", it's not working or partially. but then i try the website on opera or firefox, or on a friend's computer, and he can't see the portofolio at all. i don't know anymore what to do. thanks for any help ! the adress website is :

    https://www.lslmaker.com/

    Thanks a lot !
     
    #16 Martyprod, Dec 10, 2020
  17. Blowden

    Blowden New Member

    #17 Blowden, Feb 13, 2021
    1. PRO MEMBER PERKS Divi Mini Cart Pro Plugin - Instantly add 3 different types of mini cart to your Divi site:Learn More
  18. Tim Altman

    Tim Altman New Member

    I believe Alvaro96 achieved the effect with a neat CSS mod (hover, position & display) to get the hover to function.

    The issue I'm having is that the hover effect no longer works with WordPress 5.6+. I think it's the jquery change and how the masonry portfolio script is written.

    [WP pre-5.6] /wp-includes/js/jquery/jquery.js?ver=1.12.4-wp' id='jquery-core-js'

    [WP 5.6+] /wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'

    Here's the Masonry Portfolio script that no longer wraps the header and post-meta classes:

    Code:
    Log In or Sign Up to view this code.
    Any ideas on what needs updated in the script to work correctly with WP5.6+ (jquery 3)?
     
    #18 Tim Altman, Feb 24, 2021
(You must log in or sign up to post here.)