[Resolved] 50% Hero Image gradient

Home Forums Support [Resolved] 50% Hero Image gradient

Home Forums Support 50% Hero Image gradient

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1931155
    Quested

    Hi
    Thank you for this awesome theme. My client want to have 50 image gradient on hero section like this site https://www.thesmokies.com/

    This is my client’s website https://www.wdwtalk.com/. Both are using GeneratePress theme and WP Show Posts plugin for Hero Post.

    Humble Regards

    #1931760
    Ying
    Staff
    Customer Support

    Hi there,

    The example site is using custom CSS to achieve this.

    Can you try to remove the current overlay set to the WP show post first? Then we can work on the CSS later.

    Let me know ๐Ÿ™‚

    #1931776
    Quested

    I have removed the current overlay on the Hero section post. You can work on the CSS now. Remember I am using WP Show Post Pro.
    I want 50% image gradient on hero section like this site https://www.thesmokies.com inspired from this website https://www.wdwtalk.com/.

    #1931784
    Ying
    Staff
    Customer Support

    Go to customizer > additional CSS, replace this part of CSS:
    https://www.screencast.com/t/sDEVnk1FWo

    .wpsp-card .wpsp-content-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5% 8%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.35);
        background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
        background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
    }

    With this CSS:

    .wpsp-card .wpsp-content-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5% 8%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.35);
        background: -webkit-gradient(linear, left bottom, left top, color-stop(100%, rgba(29, 43, 70, 0.8)), to(rgba(29, 43, 70, 0)));
        background: linear-gradient(0deg, rgba(29, 43, 70, 0.8) 80%, rgba(29, 43, 70, 0) 100%);
        pointer-events: none;
    }
    #1932991
    Quested

    Thank you so much.
    worked perfectly.

    #1932993
    Ying
    Staff
    Customer Support

    You are welcome ๐Ÿ™‚

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