Adding overlays on images, videos?

It would be nice if we had more control over image overlays or the ability to have more control over positioning? relative, absolute?

I’m seeing margins on the video widgets and other things I can’t seem to get rid of. Am I missing some setting somewhere here too? I’m also not seeing the top and bottom drag handles for most content like you see in their promotional video. Left and right handles are there which is nice.

Yes you have opacity overlays for images in Blocs 3. You have to use a class. Here’s a screen shot. It’s the last tab, you see the normal state, there is all a hover state. If you scroll down you’ll see the appearance and the opacity slider.

As far as dragging top and bottom handles you need to use the shift key.



We need to start document all these advance tips


Oh, nice! What an odd place to put the Appearance Opacity option? Thanks for pointing me in the right direction. I knew I was missing some features.

1 Like

Learn from the Blocs Master :slight_smile:
Blocs 3 for Master Course by @Eldar

Something I wondered about is how we can achieve a colour overlay. In other words take a normal image and then apply a colour like blue or orange over the top with controllable opacity, so the image is still seen underneath.

You can set the background color of the bloc the image sits on and then just use the Appearance option to change the opacity of the image allowing the color to show through.

That works assuming you want the entire bloc to be covered by the image. It you look here where I’ve simply added an image inside a column and coloured the column background there is space around the image at either side. I’ll experiment a bit.


Ya, those column margins I am trying to figure out how to get rid of myself as well. I’m trying to make a big mosaic image gallery using full width rows, and columns but I can’t figure out how to get rid of these margins either? I haven’t spent a lot of time using the software just yet, Real life keeps getting in the way.

Yu can use a div in the column, then set margin and padding to 0. This should work.

It’s easy when you have multiple images. Just remove the gutter option with the row selected and the spaces disappear.

Now select the bloc instead of the row and change the appearance to full width.

That works for me, but I have to colour the background for the entire bloc in the side panel, rather than just the column.

I added the background color to the image-colored class in my example where I also set the margins and paddings to 0

I just got it to work, but I had to apply the custom class as a background colour to the image and the Div. If I tried the Div or image alone it didn’t work.

Damn it. I missed that gutter checkbox. Thanks. Trying to learn fast, keep missing these little options. One more little thing I can’t seem to find is there’s a littler margin at the bottom of my first row. Can I get rid of this too? I’ve tried making a new class. I must be missing yet another simple little thing.

Do you have the margin in the side panel for the row set at nothing like here:


Yup. No margins anywhere. Happens with every bloc I add. There’s that little margin. Not sure how to get rid of it yet.

You can try sending me the project file if you like and I’ll take a look for you. At a guess there is something in the custom class doing this.

I tried this too and also get that small margin at the top. It is coming from .mg-md which adds a 10px top margin. If you change that to 0px in the inspector, it will all line up as expected.

I’m not familiar enough with Blocs to know where that is coming from but I couldn’t find any settings that might be setting it to 10px.

@Norm What’s this stray margin?