Okay
  Public Ticket #2726222
fancy box overlay
Closed

Comments

  • Anna started the conversation

    Hi,

    How can I remove the gray overlay on the fancy boxes?

    I tried the following code but it doesn't seem to do anything. No red x so is there something else I'm missing?

    }
    .nectar-fancy-box .box-bg:after {
      background-color: transparent!important;
    }
    .nectar-fancy-box:hover .box-bg:after {
      background-color: transparent!important;
    }

    Thanks!


  •  2,961
    Andrew replied

    Hi Anna,

    Please try this css:

    .nectar-fancy-box[data-style="hover_desc"][data-color="accent-color"]:before {
        background: linear-gradient(to bottom,rgba(0,0,0,0),#0066cd00 100%);
    }

    Thanks.


  • Anna replied

    Hi Andrew,

    It takes away the overlay on hovering but not on the "original" boxes?

    Thanks!

  •  8,847
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .nectar-fancy-box[data-style="hover_desc"] .box-bg:before, .nectar-fancy-box[data-style="hover_desc"]:before {
        background: transparent !important;
    }

    Thanks


    ThemeNectar Support Team 

  •   Anna replied privately
  •  8,847
    Tahir replied

    Hey Again,

    Not sure I understand, could you elaborate a bit more on what you need removed or added ?.

    Thanks 


    ThemeNectar Support Team 

  •   Anna replied privately
  •  8,847
    Tahir replied

    Hey Again,

    The screenshot doesn't seem to have gotten attached. Could you post it again?

    Thanks 


    ThemeNectar Support Team 

  •   Anna replied privately
  •  8,847
    Tahir replied

    Hey Again,

    Remove the CSS earlier provided and use the below one only.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .nectar-fancy-box[data-style="hover_desc"].hovered .box-bg:before {
        opacity: 1;
    }
    .nectar-fancy-box[data-style="hover_desc"]:not(.hovered) .box-bg:before {
        background: transparent !important;
    }

    Thanks


    ThemeNectar Support Team 

  •   Anna replied privately