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

css hover effect on modern masonry layout

  • Post count: 10

    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,
    Adrienn
    • This topic was modified 2 months ago by  Adrienn K.. Reason: code lines broken
    Post count: 6607

    Hi,

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

    Post count: 10

    Hi,

    Thanks, it works! 🙂

    Post count: 10

    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: 6607

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

    Post count: 10

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

    Post count: 10

    Hi there,

    Is there any way to set the whole box clickable not just the title? With the upper modifications, just the title act as a link not the whole portfolio picture.

     

    Thanks in advance! 🙂

    Attachments:
    You must be logged in to view attached files.
    Post count: 6607

    You could remove the “black” div and replace all that code with this:

    Post count: 10

    Thanks for your answer.

    I paste this code and the link is OK but the hover effect not working – the opacity remains the same. 🙁

    http://webaholic.hu – you can check the site here.

     

    Thanks is advance, again!

    Post count: 6607

    Ok, remove the code I posted above and use this one instead: 🙂

    Post count: 10

    That’s so cool! Thanks a lot! 🙂

You must be logged in to reply to this topic.