Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 3, 2021 at 1:57 am #1303674
    nfgraphicdesign

    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!

    June 4, 2021 at 1:13 pm #1304019
    Rikard

    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

    June 7, 2021 at 11:31 pm #1304493
    nfgraphicdesign

    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:

    Event Rentals

    Thanks,
    Nathan

    June 9, 2021 at 8:31 am #1304803
    Ismael

    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

    June 9, 2021 at 7:26 pm #1304966
    nfgraphicdesign

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

    June 11, 2021 at 6:11 am #1305190
    Ismael

    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

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