Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1303674

    Hi there,

    Currently I have an easy slider inside a column and on hover I have the hover effect on for the column.

    The result is that on hover the column is .8 opacity.

    I am trying instead to have the column or slider be darker on hover, but only apply it to the slider images and not the slider title. When I try to target the avia-slideshow-inner ul it has no effect on hover. I am only able to get .avia-slideshow to work with an opacity hover setting and when I do that the title also is affected.

    Is it possible to only target the avia-slideshow-inner ul li opacity somehow? Then I could apply a dark background color to the column to achieve the desired effect.

    Thanks!

    #1304019

    Hey nfgraphicdesign,

    Could you post a link to where we can see the elements in question please? If you have a screenshot highlighting your intentions, then that would help too.

    Best regards,
    Rikard

    #1304493

    Hi Rikard,

    The 2 easy sliders are at the top of the home page here: http://nfgraphicdesign.ca/mirus/

    What I would like to make happen is to have them go darker on hover like the 2 images I have on this page:

    Thanks,
    Nathan

    #1304803

    Hi,

    Thank you for the update.

    How did you set the opacity of the columns? Please post the css code here so that we know which elements have been modified.

    Best regards,
    Ismael

    #1304966

    it is currently just the enfold hover effect for the column that is making the opacity change on hover

    #1305190

    Hi,

    Thank you for the info.

    Try to disable the columns’ hover effect, or use this css code to completely disable it across the site.

    body .flex_column.avia-link-column.avia-link-column-hover:hover {
        opacity: 1;
    }

    Then add this css code to add the hover effect to the slider inside the column.

    .avia-slideshow-inner .avia-slide-wrap {
        background: #000000;
    }
    
    .avia-slideshow-inner li div img {
        opacity: 1;
        transition: opacity 0.5s;
    }
    
    .avia-slideshow-inner li:hover div img {
        opacity: 0.5;
    }

    Best regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.