Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 3, 2021 at 11:27 pm #1285172
    Josh

    Hey guys, this may fall outside the realm of support but thought i’d check anyways;

    I was trying to use this effect in a color section but without the BG image in the pen, instead using the fixed photo i have in the color section as the next layer back (the effect i am trying to achieve is a black over lay with the text knocked out so as it scrolls over the fixed color section BG it reveals it;
    https://codepen.io/Jintos/pen/crlxk

    i found there was a conflict with the .clip-text class so i updated those accordingly but i still could not get the effect to work in a color section. The text doesn’t knock out, it’s just a black box. Seems ot perhaps be a conflict with the theme? Any thoughts as to how i might get this to work?

    The alternative is i could use an image to accomplish the same. I’m trying this right now but the overlay doesn’t allow me to set the overlay to cover, so as to resize for various resolutions. I’d be fine using this method if the the first is problematic. Please advise?

    March 4, 2021 at 7:12 pm #1285495
    Josh

    I’ve pivoted here after giving up on the knockout text — ive decided to go with a PNG.

    I’ve loaded the PNG in a div but i cant get the div to load 100% wide. There is 50px of padding on either side that i cant seem to overcome. Can you help with this?

    Link below.

    March 5, 2021 at 2:48 pm #1285759
    Rikard

    Hi,

    Thanks for the update. Your site looks to be in maintenance mode, could you share login details in private, so that we can view it please?

    Best regards,
    Rikard

    March 5, 2021 at 9:10 pm #1285928
    Josh

    Oops sorry Rikard, i had dropped the wall but someone else raised it again. It’s accessible now.

    March 7, 2021 at 7:00 am #1286150
    Rikard

    Hi,

    Thanks for that. The car/text with video background looks full width on my end, that is what you are having problems with, right? If so, is this problem on only happening on some screen resolutions? I checked your site on a 13″ laptop.

    Best regards,
    Rikard

    March 8, 2021 at 2:40 am #1286263
    Josh

    Hi Rickard, here is a screenshot at a higher resolution. Firefox Developers Edition is the browser.

    March 8, 2021 at 7:29 am #1286324
    Josh

    Here is a link to the full image so when comparing you can see the image is being cut off on either side of the color section. I can give it a left margin of -50 and fix the left side, but the same doesnt work on/with the right.

    March 8, 2021 at 9:25 am #1286348
    Josh

    Sorry for yet another follow up but if i could get the overlay to center and repeat horizontally i would accomplish the same goal.

    March 9, 2021 at 4:29 am #1286611
    Rikard

    Hi,

    Thanks for the update. Please try this CSS as well:

    #delivery .container {
    padding: 0;
}

    Best regards,
    Rikard

    March 9, 2021 at 8:41 pm #1286903
    Josh

    Problem solved, thank you as always Rikard! j

    • This reply was modified 3 years, 9 months ago by Josh.
    March 10, 2021 at 2:27 am #1286949
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Knockout Text in a Color Section, or a overlay set to cover’ is closed to new replies.