Placing an icon element on an image

Hi All…

Ok, I have tried everything I can think off!..
I’m trying to place and element (an icon and h4 - please see attached screenshot) on top of a placed image in Blocs. Any ideas or help would be really appreciated! :slight_smile:

Thanks.

You could use the image as brics background and place the text and icon.

or use a class to put the background image while the text and icon are visible.

Hi Nelo…

I’ve tried what you have suggested but with no luck! I can’t get an icon or text to sit on the image? I guess “z-index” would come in handy and that is something I haven’t seen in Blocs yet?

Thanks for your help! :slight_smile:

I do not know if this is what you really want to do? I leave you a sample

has a paragraph or holder, and the icon at the top, plus the background with a custom label

1 Like

Yep, that is what I’m trying to achieve! :slight_smile:

Ok, I tried it again and I placed a paragraph into a row and gave it a class with a background image.
Then I placed an icon gave it a class and moved it around with margin and came up with the screenshot attached. I’ll play with it more to get it better fine-tuned, but is that how you went about it?

Thanks.

Start with a standard bloc structure and add a three column row, or however many you need. Within each column, add your images.
Create a second standard bloc and add another row with the same number of columns. Within each column, add an icon bric and an H3 bric. Add any interactions you may want to use on the icons/text. You will end up with something that looks like this:

With the icon/text ROW selected, make a custom class and use the metrics settings to adjust the top margin as illustrated below. Note - using a NEGATIVE number will move the row upwards.

You will have to adjust the custom class for each device variant.

If necessary, you could create a custom class for each element (icon and text) and move the items individually.

If you set the second bloc to have no padding, you can just leave it empty - it won’t display in your final web page.

Note: In previous blocs versions I was able to make the two rows within a single block and adjust them as shown. However, since 2.5, it only seems to work when when the second row is contained in a separate bloc.

3 Likes

Hey Hendon52…
Thanks a heap for your visual explanation of how it can be done! :slight_smile: I will give it a try!

A big Thanks!