Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • July 13, 2018 at 6:09 am #984963
    Ushbot

    Hi guys, i’ve bugged you with something simliar before – I’m sorry

    on my masonry portfolio i’d like to add a filter effect on hover (filter: blur(5px)). So i can read the text that appears on hover.
    Back then you gave me the following code:
    #top .grid-entry .image-overlay {
    background: rgba(10, 10, 180, .96)!important;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    }

    which worked perfectly. But i’ve been editing the portfolio element quite a bit and can’t seem to target the picture anymore to apply that filter.

    July 13, 2018 at 7:32 am #984988
    Jordan Shannon

    Hey Ushbot,

    The text seems to be “out of frame” when you hover if you understand. Does that need to be fixed or is that by design?

    Best regards,
    Jordan Shannon

    July 14, 2018 at 4:20 am #985379
    Ushbot

    Hey Jordan, that is by design – but i’d like the pic beneath it to blur on hover so the font is better readable. Any ideas how to target that? thanks

    July 15, 2018 at 11:34 pm #985777
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field:

    #top a.av-masonry-entry:hover > .av-inner-masonry img {
-webkit-filter: blur(5px);
filter: blur(5px);
}

    Best regards,
    Mike

    July 16, 2018 at 3:49 am #985818
    Ushbot

    Hi!

    Thanks for the help – it worked – except I decided to work with a masonry with different settings that it won’t work on those for some reason. Sorry to be a mind-changing pain in the ass about this. But when I work with masonry in “perfect manual setting” (see link in private content) the blur stops working.

    July 16, 2018 at 4:52 pm #985982
    Jordan Shannon

    Hi,

    We need to be able to access the browser inspector, which seems to be disabled in your content.

    Best regards,
    Jordan Shannon

    July 16, 2018 at 5:13 pm #985996
    Ushbot

    Interesting – because i just inspected it in chrome and had no issue and there weren’t any issues before. Maybe try another browser?

    July 16, 2018 at 5:48 pm #986014
    Jordan Shannon

    Hi,

    I’m receiving a “content is protected” pop up.

    Best regards,
    Jordan Shannon

    July 17, 2018 at 12:01 pm #986377
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field:

    #top a.av-masonry-entry:hover > .av-inner-masonry .av-masonry-outerimage-container {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  }

    Best regards,
    Mike

    July 17, 2018 at 5:47 pm #986524
    Ushbot

    Thanks mike!
    worked perfectly as always

    July 17, 2018 at 6:29 pm #986547
    Jordan Shannon

    Hi,

    I’m glad Mike was able to to help. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘hover on portfolio filter’ is closed to new replies.