- This topic has 5 replies, 2 voices, and was last updated 2 years, 7 months ago by
.
-
Posts
-
Hi
Thank you for this awesome theme. My client want to have 50 image gradient on hero section like this site [site info removed]This is my client’s website [site info removed]. Both are using GeneratePress theme and WP Show Posts plugin for Hero Post.
Humble Regards
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 🙂
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 🙂
- You must be logged in to reply to this topic.