Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #485942

    Hey guys,

    wondering if there is a way to inlfuence hover on portfolio images. What I need is a small box, all the same size lets says 292 x 50px, transparent 90% white, at the bottom right of each picture when hovering, with a title and subtitle displayed in red . Can I do it with CSS or can I influence the existing one with my needs?

    Thanks Stephan

    #486046

    Hi handelsmann!

    Add this to your custom CSS.

    .av-inner-masonry-content {
      display: block !important;
      opacity: 1 !important;
      position: absolute;
      right: 0;
      transform: none !important;
      visibility: visible !important;
      width: auto !important;
    }
    .av-inner-masonry-content .avia-arrow { display: none !important; }
    .av-inner-masonry-content * { color: red !important; }
    

    Best regards,
    Elliott

    #486327

    HI Elliott,

    that looks great in result – BUT WE HAVE TO FIX IT ONLY FOR HOVER.
    And can you tell me where this box takes it size from – is it the font-size of main text?
    The font-size seems different from font-size of body content.
    Where do I influence that?

    Thanks in advance.

    Best Stephan

    #486385

    Hey!

    Please remove “opacity: 1 !important; ” line from Elliott’s code and then add following one

    .av-inner-masonry-content-pos * {
        font-size: 14px!important;
    }

    Cheers!
    Yigit

    #487051

    Hey Yigit,

    thank you so much for your response, but it seems that you didn’t see the introducing two lines:

    I need that behaviour for HOVER and not for standard display as it is now.
    So when HOVERING with the mouse that box should appear.

    And how do I influence box size?
    Isn’t opacity in my understanding a complete different option for the
    the density of color of the box? So why should I delete it for the font-size?
    It works perfectly side by side :-)

    Best Stephan

    #487272

    Hi!

    Switch it to this for hover.

    .av-inner-masonry-content {
      display: block !important;
      opacity: 0.8 !important;
      position: absolute;
      right: 0;
      transform: none !important;
      visibility: visible !important;
      width: auto !important;
    display:none;
    }
    .av-masonry-entry:hover .av-inner-masonry-content { display: block !important; }
    .av-inner-masonry-content .avia-arrow { display: none !important; }
    .av-inner-masonry-content * { color: red !important; }

    Cheers!
    Elliott

    #488375

    Hey Elliott,

    thanks a lot. That is going close to perfect :-).

    Deleted the first line (display: block !important;) in

    .av-inner-masonry-content {
    display: block !important; <——

    so it works fine. Why is it, when you fix the height, that the text is forced to go out of the
    image down below? Any idea?

    Thanks Stephan

    #488379

    Hey Elliott – IMPORTANT IMPORTANT IMPORTANT

    in that second I see that we influence the gallery with that code also – WE CANNOT DO THAT.
    Is there a way to have this HOVER BEHAVIOUR for the portfolio only and just have the standard display for
    gallery?

    Best Stephan

    #488856

    Hey!

    you would need to turn on custom class for all alb elements to avoid that.

    Cheers!
    Andy

    #489040

    Hey Andy,

    thanks for your response. Can you help me on alb elements as the link you integrated doesn’t work.
    Where do I find a reference for all the alb elements or there detailed definition for css.

    Thank you so much.

    Regards
    Stephan

    #489382
    #490666

    Hi Andy,

    no prob. Can you give me a little help on that.
    1) How do i refer that class for example to masonry hover and content only for portfolio?
    2) Can I only display the products in the shop without a portfolio at the top (see link)?

    Thank you

    Regards
    Stephan

    #492503

    Hey!

    Set a class .custom_masonry to the element you want to affect and prefix that to each CSS selector in the code, like:

    .custom_masonry av-inner-masonry-content {
      display: block !important;
      opacity: 0.8 !important;
      position: absolute;
      right: 0;
      transform: none !important;
      visibility: visible !important;
      width: auto !important;
    display:none;
    }
    .custom_masonry .av-masonry-entry:hover .av-inner-masonry-content { display: block !important; }
    .custom_masonry .av-inner-masonry-content .avia-arrow { display: none !important; }
    .custom_masonry .av-inner-masonry-content * { color: red !important; }

    Regards,
    Josue

    #493103

    Yes Josue, got it! Works perfectly. Thanks man.

    This needed a dot in first line – .custom_masonry av-inner-masonry-content {
    to .custom_masonry .av-inner-masonry-content {
    Just for the one who is interested :-).

    Awesome.

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Portfolio Hover’ is closed to new replies.