Okay
  Public Ticket #1529785
Disable Fancy Box Hover Effect
Closed

Comments

  •  6
    Kyron started the conversation
    April 5, 2018 at 4:37am

    Hi again,

    How can I disable the hover effect on "Color Box Hover Effect" fancy boxes? Note that I'm using a gradient for the icon color.

    Thanks

  •  9,012
    Tahir replied
    April 5, 2018 at 11:20am

    Hey,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  •   Kyron replied privately
  •  9,012
    Tahir replied
    April 7, 2018 at 11:46am

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .nectar-fancy-box[data-style="color_box_hover"]:hover .box-bg {
    opacity: 0 !important;
}

    Thanks

    ThemeNectar Support Team 

  •  6
    Kyron replied
    April 9, 2018 at 1:46am

    Hi Tahir,

    Your solution isn't working as intended, unfortunately. I would like nothing to happen on hover. With your CSS, this is what happens now:

    Thanks

  •  9,012
    Tahir replied
    April 9, 2018 at 1:55pm

    Hey Again, Hope you had a Great Weekend, 

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .nectar-fancy-box[data-style="color_box_hover"][data-color="extra-color-gradient-1"]:hover:before {
    box-shadow: none !important;
}

    Thanks

    ThemeNectar Support Team 

  •  6
    Kyron replied
    April 10, 2018 at 5:12am

    Hi again,

    The shadow isn't showing up anymore (thanks), but the icon and text is still disappearing on hover. Any ideas?

    Thanks

  •  9,012
    Tahir replied
    April 10, 2018 at 12:37pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .nectar-fancy-box[data-style="color_box_hover"][data-color*="gradient"] .inner i.hover-only{
    color:#000 !important;
}
.nectar-fancy-box[data-style="color_box_hover"]:hover .inner-wrap *, .nectar-fancy-box[data-style="color_box_hover"]:hover .inner-wrap {
    color: #000 !important;
}
.nectar-fancy-box[data-style="color_box_hover"][data-color="extra-color-gradient-1"]:hover:before {
    box-shadow: none !important;
}

    Thanks

    ThemeNectar Support Team