Streaming live at 10am (PST)

Adding a gradient to CMS image?


#1

I am trying to recreate what is made at the 0:50 mark of this tutorial https://university.webflow.com/article/image-field . I am wondering how the furthest back background has a blur and a dark solid color (to darken it) since when you “Get BG image from Blog Posts” it also “overrides all background gradients.”


Here is my site Read-Only: LINK


#2

Hi Kameron,

Here are a few steps to help you achieving the blur effect with a gradient on the hero section:

1 - Remove the BG image from Section 2 and change the section position to “Relative”:

step 1

2 - Inside Section 2 create a new Div block and add a class (e.g.: “bg image”). Set this new block to position: absolute

3 - Still on the “bg image” div, add a blur filter to your image:

12

4 - Create a new Div Block under Section 2, add a class (e.g.: “gradient overlay”) and also set the position: absolute

step 3

5 - You can now add your gradient or color to this new div block:

10

Hope this help you achieving the effect that you are looking for :wink:


#3

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.