Controlling a Gradient on Image

Design help General
1

Has anyone this ?

In this project… I have a huge div with a semi-transparent color laid on top.

When you scroll over another section further down the page - the the “huge div” is effectively by changing it’s opacity.

I would prefer to do it a different way.

Instead… I would like to place an image directly onto a section.

Then lay a gradient over the image… so the gradient (and obviously the image) is contained within the section.

Further down the page… would be another section.

On scroll of the 2nd section… I would like to change the opacity of the gradient over the image in the 1st section.

I cannot see a way to control the section1:gradient.opacity over section2.scroll.

There is another question in the forums about Mobile First… and perhaps some limitations of Webflow that I haven’t yet encountered.

What I’m trying to do “is doable” in Boot Strap. Can it be in Webflow. Or is this a limitation with Webflow.

2

Hi @Revolution,

Thanks for posting your design question. Is there any way you can provide some examples or screenshots? Also, if you’ve already began working on this effect, include your site’s read-only link and I’d be happy to take a look. :slight_smile: More info on read-only links here: Share a read-only link | Webflow University.

Cheers,
Will

3

I cannot create a demo - because I don’t know how to set the gradient…

I will try to describe it again.

2 Sections. Section 1 and Section 2.

Section 1 is above section 2.

Section 1 has a background image and a semi-transparent gradient that overs the entire section.

Section 2 has text… which is not important except to maintain the size of section 2.

Section 2 has a scroll and hover transition.

Both transitions - change the opacity of the gradient in section to 0.

How do you affect the gradient layer - not the section… the gradient.

4

I was trying to chime in but your explanation does not make any sense. Why not just publish to the subdomain and let us look at it?

5

Hi @Revolution, at the moment, it is not possible to change the gradient via an interaction, so you can only change the opacity of the section element, not the opacity of the background color, background image or the gradient, at this time. Maybe in the future we will update this and add some more styling capabilities, we need to see how that fits in with some of our planned updates… we have had this request already and it is on our customer wish list :smile:

An alternate method to change the gradient opacity is to use jQuery and the CSS method to dynamically change any element or css property on your page, but it does involve some custom coding, which Webflow does not support (we only support currently implemented features). So while this can be done, and it is relatively easy to adjust css via jQuery, you still need to know jQuery and css and custom coding in order to accomplish this.

Hopefully that helps ! Cheers, Dave

6

thanks @cyberdave

Trying to figure out how to incorporate jquery in webflow now.