Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • June 17, 2017 at 8:40 pm #809371
    KyriK

    I am trying to use Gradient Overlay on Background Image inside a color section.
    Added a background image, and the following css code but the image is not visible. Any ideas?

    bg-image-gradient-overlay {
    background-image: -webkit-linear-gradient(90deg,#1769ac 10%,#3AA17E 90%)!important;
    background-image: linear-gradient(90deg,#1769ac 10%,#3AA17E 90%)!important;
    background-attachment: scroll;
    }

    June 17, 2017 at 11:25 pm #809408
    Mike

    Hey KyriK,
    When you add your Color Section, make sure to go to the Section Background Overlay tab and Enable Overlay.
    postimage
    Then you can add your Gradient Overlay code in the General Styling > Quick CSS field:

    .av-section-color-overlay {
background-image: -webkit-linear-gradient(90deg,#1769ac 10%,#3AA17E 90%)!important;
background-image: linear-gradient(90deg,#1769ac 10%,#3AA17E 90%)!important;
}

    Notice the class is “.av-section-color-overlay”, that is because you enabled it above :)
    postimage

    Best regards,
    Mike

    June 18, 2017 at 9:33 am #809498
    KyriK

    Thank you for your response. This is what i was looking! :)

    June 18, 2017 at 2:55 pm #809543
    Rikard

    Hi,

    Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    January 7, 2021 at 6:19 pm #1270934
    breezemedia

    it works for me also, but i use an opacity for the overlay.
    unfortunately the Caption (text) is also influenced by that opacity and not good to read.

    .bild-buttons .av-image-caption-overlay {
    opacity: 0.75;
    background: linear-gradient(-145deg,#72b52e, #2196eb) !important;
    }

    How can i do the transparent gradient, without any transparency on the text?

    January 9, 2021 at 4:25 am #1271185
    Rikard

    Hi breezemedia,

    Please try this CSS instead:

    .bild-buttons .av-caption-image-overlay-bg {
  opacity: 0.75;
  background: linear-gradient(-145deg,#72b52e, #2196eb) !important;
}

    Best regards,
    Rikard

    January 9, 2021 at 4:15 pm #1271225
    Guenni007

    and by the way : https://webers-testseite.de/multiple-background-images/

    January 9, 2021 at 7:53 pm #1271239
    breezemedia

    Thank you for the help and the hint (@guenni007)
    it#s always good to have you. That’s why i love enfold!

    January 10, 2021 at 12:53 pm #1271342
    Rikard

    Hi breezemedia,

    Thanks for the update. I take it you got it working then?

    Best regards,
    Rikard

    January 10, 2021 at 4:13 pm #1271374
    breezemedia

    actually, it’s working, but not exactly the final version.
    I also need an hover-overlay on that picture.
    With that QuickCSS i just define the overlay, and the overlay on mouseover is gone.

    So can you give me also a hint to define the hover-overlay-color, while the Text don’t get any transparency?

    January 11, 2021 at 11:54 am #1271562
    Rikard

    Hi,

    Please try this CSS as well:

    .bild-buttons .av-caption-image-overlay-bg:hover {
  opacity: 0.55;
  background: linear-gradient(-165deg,#eee, #ccc) !important;
}

    Best regards,
    Rikard

    January 11, 2021 at 1:05 pm #1271577
    breezemedia

    hi, i already tried this, but it does not work.
    (right now it is in QuickCss, if you wanna check)

    January 12, 2021 at 11:30 am #1271828
    Rikard

    Hi,

    It’s applying fine on my end, please see screenshot: https://imgur.com/a/SACmbub

    Best regards,
    Rikard

    January 13, 2021 at 6:44 pm #1272243
    breezemedia

    yes, that’s also on my end.
    The problem/wish is, NOT to see the clear picture on mouse-over. On Mouse over i still want to have another Overlay-BG as it was before.

    I just did the effect right now, like i want it to be.
    But you can see, the Text in .av-image-caption-overlay-center is now also transparent.
    It would be great to have the current effect on mouseover, but the text should always stay in 100% poacity.

    • This reply was modified 3 years, 10 months ago by breezemedia.
    January 15, 2021 at 1:20 pm #1272705
    Mike

    Hi,
    Thank you for the feedback and for the test page, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #leistungen .av-overlay-hover-deactivate.bild-buttons .avia-image-overlay-wrap:hover .av-image-caption-overlay-center {
    background: unset !important;
    opacity: 1 !important;
}
#leistungen .av-overlay-hover-deactivate.bild-buttons .avia-image-overlay-wrap:hover:after {
	position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
    background: linear-gradient(to bottom, rgba(114, 181, 46, 0.65) 0%,rgba(114, 181, 46, 0.65) 100%);
}

    After applying the css, please clear your browser cache and check.
    If this doesn’t help please remove your current custom css for this element so I can try something different.

    Best regards,
    Mike

    January 15, 2021 at 3:22 pm #1272753
    breezemedia

    sorry, it didn’t work.
    i removed all CSS from this element. The individual class “bild-buttons” is still available, but has no css now.

    January 16, 2021 at 11:43 am #1272916
    Mike

    Hi,
    Thank you, currently you still have this css activated:

    .av-overlay-hover-deactivate .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg {
    opacity: 0 !important;
}

    this is what is removing the background color from the element on hover, with opacity. As I understand your goal, you would like a different overlay on hover, so please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #leistungen .av-overlay-hover-deactivate.bild-buttons .avia-image-overlay-wrap:hover a:after {
	position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
    background: linear-gradient(-145deg, rgba(114, 181, 46, 0.45) 0%,rgba(33, 150, 235, 0.45) 100%);
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    January 16, 2021 at 6:08 pm #1272944
    breezemedia

    PERFECT!

    January 17, 2021 at 6:03 pm #1273115
    Victoria

    Hi breezemedia,

    Glad you got it working for you with Mike’s help! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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