Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 11, 2015 at 2:10 pm #485942
    handelsmann

    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

    August 11, 2015 at 4:29 pm #486046
    Elliott

    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

    August 12, 2015 at 8:17 am #486327
    handelsmann

    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

    August 12, 2015 at 10:59 am #486385
    Yigit

    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

    August 13, 2015 at 10:27 am #487051
    handelsmann

    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

    August 13, 2015 at 4:08 pm #487272
    Elliott

    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

    August 16, 2015 at 2:49 pm #488375
    handelsmann

    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

    August 16, 2015 at 3:05 pm #488379
    handelsmann

    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

    August 17, 2015 at 12:51 pm #488856
    Andy

    Hey!

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

    Cheers!
    Andy

    August 17, 2015 at 5:32 pm #489040
    handelsmann

    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

    August 18, 2015 at 11:18 am #489382
    Andy

    Hi!

    sorry, here is the correct one: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Regards,
    Andy

    August 20, 2015 at 11:46 am #490666
    handelsmann

    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

    August 24, 2015 at 9:35 pm #492503
    Josue

    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

    August 25, 2015 at 5:18 pm #493103
    handelsmann

    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.

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