Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 16, 2018 at 7:39 pm #1022350
    ronduring

    In using Layerslider, we have a dynamic link slide that is pulling the featured images from our current news posts.
    We want to add a gradient overlay using CSS, but we could not find a way to do this.
    Our workaround solution was to add a gradient overlay image above the dynamic layer, however when that is done, the link to the post the image is linked to is mostly hidden by the image above it.
    We tried add code in custom css, but that didn’t seem to work.
    What do you suggest, thanks.

    October 17, 2018 at 4:50 pm #1022881
    Ismael

    Hey ronduring,

    Thank you for using Enfold.

    Create a layer, set it to html and add a single div to it. Set the width and height to 100% and then add the gradient css code in the layer’s Styles > Custom CSS field. Adjust the opacity or transparency of the layer as needed.

    Best regards,
    Ismael

    October 17, 2018 at 5:26 pm #1022927
    ronduring

    Thanks. We just updated the site with your suggestion. See site link below now.
    What happens is that the HTML layer is added above the Dynamic link layer. Because it is a different layer, it disables the link to the article completely, and it also fills in over the text and the image.
    We were looking just to have a darker background under the text only, fading the image a bit, but keeping the title text white.
    I think the css for the overlay for the gradient has to be done within the same layer some how. Let me know what you suggest.

    October 18, 2018 at 11:53 am #1023302
    Ismael

    Hi,

    You can move the layer below the others. Have you tried that?

    Best regards,
    Ismael

    October 18, 2018 at 4:07 pm #1023414
    ronduring

    Yes, we have tried moving the layers around. Right now the HTML layer you had us add is the second layer, so now it does look better and it shows the way we want, but the link from the featured image to the blog post it is associated with is being blocked. It seems you would have to add the gradient code on the same layer of the slide. Is there any way to do that in a Dynamic Layer?
    Can a div wrap be put around the [image] tag that is in the content window for this layer?
    We tried just adding custom css to the dynamic layer and nothing shows or works.
    If it is possible, how it it be done, and where would the css code need to be? Within layerslider or the theme?

    October 19, 2018 at 11:28 am #1023852
    Ismael

    Hi,

    Add a unique id or class attribute to the image or link and then use that selector to create a pseudo element.

    // https://developer.mozilla.org/en-US/docs/Web/CSS/::before

    Apply the gradient or overlay to that element.

    Best regards,
    Ismael

    October 19, 2018 at 5:23 pm #1024067
    ronduring

    Not sure if it is working right. See login info.

    October 22, 2018 at 3:37 am #1024651
    Ismael

    Hi,

    Yes, that’s another way to do it. Or you can add adjust the range of the css gradient.

    background: -moz-linear-gradient(top, rgba(0,0,0,0)33%, rgba(0,0,0,0.65) 57%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 33%,rgba(0,0,0,0.35) 57%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 33%,rgba(0,0,0,0.65) 57%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

    You can then apply the post link to the gradient layer in the “Link & Attributes” panel. Let us know if you need anything else. :)

    Best regards,
    Ismael

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