I did a search on this and as usual lost two or three hours reading unrelated threads. this is a common occurrence for me when i use the forums - get sidetracked too easily with all the other useful information.

Anyhow, i think my problem will be an 'easy-fix' but i am having a mental blank and don't want to waste another day browsing the forums.
Can anyone tell me how to add a title / heading / callout over an image already in place?
I can add it below or alongside, but the image takes up the full width and i want it to almost be 'see-through (transparent)' and placed randomly over the top of the image - is it possible to place a heading over the pic in ANY position? Can it contain a hyperlink to another page?
Kind Regards
Tony

Hi Tony,
Without seeing your page my best recommendation would be to place the title within the same div holding the image and then use relative or absolute positioning. If you share a link I'm sure there's plenty of users here that have done this exact thing and can easily point you in the correct direction.

One way would be to make the image a background image in the column/row/whatever, then you can insert a container element into that column/container whatever, which you can then insert text H1 elements etc including button or text links.

Another method is to place a div below the image. Make the max-width and max-height the same as the image. Add your title in the div. Add a negative margin to the div to make it appear over the image.

Thanks everyone - I'll have a go tomorrow and let you know how i go.

Hey Wayan - are you good in Bali with the volcano mate? I know you are not in the immediate vicinity, but i hope it isn't too inconvenient for you? Stay safe mate.

Tony

Hi Tony No problem for where I am in the South, but I have property & Family in the North which may be in the line of fire so to speak, if it goes boom in a big way, but they have already moved out of the danger zone.

On the note of the thread & your little hiccup if you get really stuck I have a couple of videos showing some of those ways to get that effect, I'm updating my site at the moment so they aren't up , but I can do something if you get stuck.

Thanks for the thoughs

Wayan

Well I'm a little late to the show but this is how I do it.

When you add an image it goes to a static position by default. So when you add some text or something like that and relative position those, it'll use the entire column. Then getting the text or buttons to go right and bottom it gets funky adding margins and stuff...

What I do is put the image in a container and make that containers position relative. Now when you add your other element like text in the container you use absolute position for those. That way those absolute elements will position to the container exactly like you want, you can use left right bottom or right values and they'll stay in the same place for all screens. You can also make them different sizes or move them a bit at the breakpoints, gives you better control I think?