This topic contains 5 replies, has 2 voices, and was last updated by  Adrienn K. 1 week ago.

css hover effect on modern masonry layout

  • Post count: 5

    Hi there,

    I want to set a hover effect on photos at Modern Masonry portfolio archive page (this is the Home page at my site). To do this I make a new div (called “black”) at entry-masonry.php file, so my code is like this:


    In the theme customizer, I add the following lines to the unique css section:
    .black {top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;opacity: 0.4;transition: .5s ease;background-color: black !important;position: absolute;}
    .black:hover {opacity:0}
    The 0.4 opacity works fine it’s seen on the photos but the :hover style does not work.
    Please give me some advice.
    Thanks in advance,
    • This topic was modified 2 weeks ago by  Adrienn K.. Reason: code lines broken
    Post count: 6495


    You need to add z-index: 201; to “.black”.

    Post count: 5


    Thanks, it works! 🙂

    Post count: 5

    Sorry, but there is a problem again – however the hover effect works fine but the header section get behind the black effect so the title gets darker too and the link not working. 🙁

    Post count: 6495

    You can use this code to bring the title above the black overlay:

    Post count: 5

    Ah, thanks a lot! I tried a similar solution but it is not perfect. Your code is great!

You must be logged in to reply to this topic.