Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 6, 2014 at 1:32 pm #300637
    royaltask

    I am testing mouse-over with my gallery.
    I want to have the hover layover black 80% and a tooltip caption (color:white) centered on the image.

    I did this so far:
    #top .avia-gallery .avia-gallery-thumb a:hover{opacity: 0.8;background-color:#000}
    It still shows white not black. Can you help me on this?

    • This topic was modified 10 years, 3 months ago by royaltask.
    August 6, 2014 at 1:35 pm #300640
    Yigit

    Hey royaltask!

    Please try using following code instead

    #top .avia-gallery .avia-gallery-thumb a:hover { background-color: rgba(0,0,0,0.8); }

    Best regards,
    Yigit

    August 6, 2014 at 1:40 pm #300645
    royaltask

    not working, the image shows still white. maybe I have to ajust the img tag?

    I added this to CSS Custom:

    /* tooltip */
    #top div .avia-gallery img {
    padding: 0;
    width: 98%;
    margin-bottom:6px;
    }
    #top .avia-gallery .avia-gallery-thumb a:hover { background-color: rgba(0,0,0,0.8); }
    .page-id-4026 .avia-tooltip.avia-tt { display: none !important; opacity: 0 !important; }

    • This reply was modified 10 years, 3 months ago by royaltask.
    August 6, 2014 at 1:41 pm #300647
    Yigit

    Hey!

    Can post the link to your page where you have your gallery element please?

    Regards,
    Yigit

    August 6, 2014 at 1:45 pm #300650
    royaltask

    local, sorry. Nothing special though. Just changed the CSS on shortcode.css an custom CSS.
    I added this to CSS Custom:

    /* tooltip */
    #top div .avia-gallery img {
    padding: 0;
    width: 98%;
    margin-bottom:6px;
    }
    #top .avia-gallery .avia-gallery-thumb a:hover { background-color: rgba(0,0,0,0.8); }
    .page-id-4026 .avia-tooltip.avia-tt { display: none !important; opacity: 0 !important; }

    Info: width: 98%; and margin-bottom:6px; should make the gallery images have some space between. Is there a better way?

    • This reply was modified 10 years, 3 months ago by royaltask.
    August 6, 2014 at 2:01 pm #300657
    Yigit

    Hi!

    It should work fine. Unfortunately i am not sure if i understood what you would like to achieve, clearly. Can you post a mockup?

    Best regards,
    Yigit

    August 6, 2014 at 2:04 pm #300659
    royaltask

    I added this:

    #top #wrap_all .avia-gallery-1 .avia-gallery-thumb a {
    width: 32.3333% !important;
    margin: 5px !important;
    }

    August 6, 2014 at 2:11 pm #300663
    Yigit

    Hey!

    Please try resizing your window and check if it causes any responsive issues. If it does, you can add media queries as following 

    @media only screen and (min-width: 990px) {
#top #wrap_all .avia-gallery-1 .avia-gallery-thumb a {
width: 32.3333% !important;
margin: 5px !important;
}}

    Regards,
    Yigit

    August 6, 2014 at 2:12 pm #300664
    royaltask

    Do you say:

    #top .avia-gallery .avia-gallery-thumb a:hover { background-color: rgba(0,0,0,0.8); }

    makes the image dark on mouse-over? mine is getting white. no black 80% hover.-)

    • This reply was modified 10 years, 3 months ago by royaltask.
    August 6, 2014 at 2:20 pm #300668
    Yigit

    Hey!

    I thought you have added an image overlay.You cannot change background color when decreasing opacity.

    Cheers!
    Yigit

    August 6, 2014 at 2:26 pm #300674
    royaltask

    I have no overlay yet, can I add one for all galleries?

    August 6, 2014 at 3:21 pm #300687
    Yigit

    Hi!

    Yes you can, but you are going to need to modify Gallery.php file inside Enfold/config-templatebuilder/avia-shortcodes folder. You can find some tutorials here – http://www.corelangs.com/css/box/overlay.html

    Regards,
    Yigit

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.