Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 7, 2014 at 3:47 am #261067
    oliviad

    Hi,

    I would like to add an overlay on fullscreen slider to darken a little bit the image, would this be easy to do tweaking the code? Thanks very much for your help!

    Olivia

    May 9, 2014 at 7:08 am #262165
    Devin

    Hi oliviad!

    This is as best that I could figure out a way to do:

    
.avia-fullscreen-slider:after {
    content: ' ';
    height: 100%;
    width: 100%;
    background-color: rgba(37, 34, 34, 0.45);
    display: block;
    z-index: 100000;
    position: absolute;
    top: 1px;
}

    You could add that to your child theme style.css or the themes Quick CSS field in the styling tab. The background color is RGBA with the ‘A’ being transparency.

    It will only work in modern browsers that support the :after pseudo class and probably fail completely on IE.

    Also note this will overlay the whole slideshow, so the buttons and any content on there as well.

    Best regards,
    Devin

    • This reply was modified 11 years, 5 months ago by Devin.
    January 26, 2015 at 4:58 am #385246
    Micheal0424

    I just tried this, worked perfectly!!

    Thanks for putting that together.

    Very nice.

    I am going to try and find the same thing but for the color section custom background images.

    January 26, 2015 at 5:35 am #385249
    Micheal0424

    I used this and it works great.

    Question though. I am using it in the full width slider and also using the transparent glassy header.

    Now that I have the overlay none of my menu links are working.

    How do I make the menu links work again?

    It is like the overlay is on top of the men as well and blocking the mouse click.

    Thank you.

    January 27, 2015 at 5:26 pm #386388
    Elliott

    Hi!

    Send us a link and we’ll take a look. You can set your reply as private if you wish.

    Cheers!
    Elliott

    January 28, 2015 at 5:34 am #386770
    Micheal0424
    This reply has been marked as private.
    January 28, 2015 at 11:19 am #386893
    oliviad

    Hi,

    Any idea how to put caption above overlay ?
    Thanks

    January 28, 2015 at 11:20 am #386894
    oliviad

    Hi,

    Any idea how to put caption, logo and menu above overlay ?
    Thanks

    January 29, 2015 at 7:38 pm #387931
    Elliott

    Hey!

    Add this to your custom CSS.

    #header {
  z-index: 2147483647 !important;
}

    Or change this line in the CSS Devin posted.

    z-index: 100000;

    To something smaller.


    @oliviad    , Send us a link and we’ll take a look. You can set your reply as private if you wish.

    Cheers!
    Elliott

    January 30, 2015 at 12:57 am #388066
    Micheal0424

    Worked perfectly, thank you!!!

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Add an overlay on fullscreen slider’ is closed to new replies.