Cornerstone problem: add linear-gradient to an image

[Chiweilin]

Dear Support:

I’d like to add a linear-gradient to make the bottom of the image (see note below) look blend-in the white background. I have been trying some CSS to make the change, but it still doesn’t work. Could you please help? What do I need to put in in the Style section in Cornerstone?

note:
The image is the background image with the text “Reviews from Our Customers” on https://www.meetmyguide.com/zhuilu-old-trail/.

Appreciate your help!

[nico]

Hi @Chiweilin,

Thanks for writing in.

I saw this blog below and it is good guide for you to create what you want.

How to add gradients to images with CSS ::after

To integrate it in your setup, you need to add class to the section to make it more specific section.

So you should have something like this in your CSS code in your custom CSS:

.yoursection::after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
  margin-top: -150px;
  height: 150px;
  width: 100%;
  content: '';
}

Hope it helps.

Let us know how it goes.

Thanks.

[Chiweilin]

Hi Nico,

Thanks for your speedy reply. I have tried the CSS you provided, the gradient I want shows! But somehow it shows like the screenshot below in Cornerstone, and it looks weird that the linear-gradient shows and stops before the image ends on the bottom:

When I saved and published and check it on the browser, it seems nothing changed (https://www.meetmyguide.com/zhuilu-old-trail/)

Could you please kindly help again? Thank you so much:)

Sincerely,
Wei

[thai]

Hi There,

Please update the custom CSS to this:

.reviews::after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
  height: 150px;
  width: 100%;
  content: '';
  position: absolute;
  bottom: 0;
}

Let us know how it goes!

[Chiweilin]

Hi Thai,

Thanks for the help. It works in the preview of Cornerstone. But nothing changes when I see the page in a browser. Could you please help again? Appreciate you guy’s support!

Wei

[thai]

Hi There,

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

• Link login to your site
• WordPress Admin username / password

Thanks.

[Chiweilin]

Ok, please help.

[ruenel]

Hello There,

You haven’t provided a username. We were not able to log in in your site.

By the way, I am sure that the code works because as you mentioned, it works in the preview. As I inspected your site, it turns out that you installed W3 Total Cache. Please clear your plugin cache first before testing your site. It is also recommend that you temporarily turn it off. Caching plugins are best turn on when you are finished building your site.

Please let us know how it goes.

[Chiweilin]

I am sure it’s not the plugin cache problem because I am able to see any other changes I made in the Cornerstone in a browser afterwards. Here’s the username:

[jumar]

Hello there,

It’s now fixed. It wasn’t working due to V2 elements cache.

For your convenience, I’ve cleared your style cache and added the CSS code given by my colleague into X > Theme Options > CSS.

Thank you.