Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #809371

    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;
    }

    #809408

    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

    #809498

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

    #809543

    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

    #1270934

    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?

    #1271185

    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

    #1271225
    #1271239

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

    #1271342

    Hi breezemedia,

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

    Best regards,
    Rikard

    #1271374

    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?

    #1271562

    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

    #1271577

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

    #1271828

    Hi,

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

    Best regards,
    Rikard

    #1272243

    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, 2 months ago by breezemedia.
    #1272705

    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

    #1272753

    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.

    #1272916

    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

    #1272944

    PERFECT!

    #1273115

    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

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