50% Hero Image gradient

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 :)

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 [site info removed] inspired from this website [site info removed]/.

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

Thank you so much.
worked perfectly.

You are welcome :)