Okay
  Public Ticket #2837920
Fancy box
Closed

Comments

  •  8
    marknorm14 started the conversation
    July 30, 2021 at 5:46am

    hi...

    on this page https://priorityweee.co.uk you'll see a fancy box at the bottom of the page, above the footer.

    Can you advise css as to how I give the box a stronger/full overlay on hover so that the hover text is more legible?

    many thanks

  •  2,961
    Andrew replied
    July 30, 2021 at 7:32am

    Hi there,

    Please try the following CSS.

    .nectar-fancy-box[data-style="hover_desc"][data-color="extra-color-1"]:before {
    background: linear-gradient(to bottom, rgb(0 0 0 / 50%), #08052c 100%);
}

    Regards,

  •  8
    marknorm14 replied
    July 30, 2021 at 8:31am

    hi, thanks andrew...


    not quite working that....really need the gradient to fade further up the fancy box on hover...?


    thanks

  •  8
    marknorm14 replied
    July 30, 2021 at 8:45am

    also...the padding to the inner right needs closing up...what would css be for that?

    many thanks

  •  8,846
    Tahir replied
    July 30, 2021 at 10:13am

    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"][data-color="extra-color-1"]:before {
    background: linear-gradient(to bottom, rgb(0 0 0 / 0%), #08052c 50%, #08052c 100%) !important;
}
.nectar-fancy-box[data-style="hover_desc"] .hover-content {
    max-width: 100% !important;
}

    Thanks

    ThemeNectar Support Team 

  •  8
    marknorm14 replied
    July 30, 2021 at 10:20am

    perfect, thanks!