Linear Gradient on bloc image

I Need Help
1

Hi Folks,

Very much new here and trying to get a class working, have tried all options I can see, and need help.

I have a bloc with background image and was using the “Texture” - “Darken” but the darken is too dark.

So instead I made a class with a gradient, set the opacity to about 30% on each of the two colours, but the image below is not visible at all.

When I add a css blur filter I can see that the gradient is sitting on top of all other layers including text, so I changed the z-index of the class to -1, nothing and up to -7 and I still cant see the image below, its as if the class stays sitting on top of all layers ignoring the z-index, as well as not applying the opacity in the gradient.

Thanks.

Screenshot 2021-02-26 at 20.26.01
Screenshot 2021-02-26 at 20.26.011091×1213 111 KB
Screenshot 2021-02-26 at 20.26.16
Screenshot 2021-02-26 at 20.26.161220×1237 159 KB

2

Hi @mewl,

You can do this using Pseudo Elements.

Say you add a class to your bloc called .myimage. (you can name this anything, as long as the next class we are making matches)

You then create another class in the Class Editor called .myimage::before (you do not add this class to the canvas)

On this class set the following

Position: absolute
left, right, top and bottom: 0
Set your background / gradient.

Screen Shot 2021-02-27 at 10.31.41 AM
Screen Shot 2021-02-27 at 10.31.41 AM1648×966 213 KB
Screen Shot 2021-02-27 at 10.31.51 AM
Screen Shot 2021-02-27 at 10.31.51 AM1648×966 222 KB

2 Likes
3

Great! Thank you agin for coming to the rescue, its working just fine, I’d say that would have taken me a week to figure out. I’ll go read about Pseudo Elements now… Thanks again.

4

Nice, good on you. it’s not to be confused with Pseudo classes which is :hover, :focus etc.

But getting your head around how they work, opens up a bunch of opportunities.

1 Like
5

I also think that Darken texture can be a bit dark sometimes, so for most of my projects these days, I just change the default darken colors to what I like. This way I can easily apply it to any blocs in my project.

I just change the classes:
.texture-darken::before
.texture-darken-strong::before

I have made a video about it for Blocs 3, but it’s exactly the same in Blocs 4.

Cheers,
Eldar

2 Likes
6

@PeteSharp thanks, indeed I’ll look out for not confusing the different pseudo’s , I’m looking forward to being able to unlock some of the doors with these tools.

@Eldar thanks for letting me know, I’ve gone through a bunch of your great videos already, I must have missed that one, thanks a mil.

2 Likes