Can a UI Image be placed in front of another interactable UI object and not interfere with that object?

I have a lot of text. It’s nicely laid out and scrollable because it’s a child of a panel with UI Scroll Rect, UI Image, and UI Mask. Works fine but…

At the top of this parent panel when a user scrolls I want the text to look like it’s fading out when it goes towards the top of the panel. My first thought was to use the UI Image and UI Mask on the panel for a smooth fade, but unfortunately it seems like this method only supports a 1 bit mask. I need a nice smooth fade, so the next thing I tried was placing a new UI Image with a smooth gradient fade in the alpha channel and tinted to the background color. Voila, now when the text is scrolled it looks like it’s fading out, but…

Now the text that is underneath the image is no longer scrollable. Meaning that the Image seems to be interfering with the lower Panel’s Scroll Rect, intercepting the user input. Is there a way to keep the image over the text, but still allow users to scroll in the red area (see pic)?

[37875-screen+shot+2014-12-30+at+12.08.54+pm.png|37875]

Add a “Canvas group” component to the Image and set “Blocks raycasts” to false.