Place Text on Image


#1

Is it possible to place text over an image without using the image as background?
Thanks in advance


Blocs, brics and .... premade html widgets
Text on pictures bloc
#2

Not without using an image editor.


#3

Custom class can Input -margin !
Enjoy it.


#4

Don’t use an image bric (img tag), use a div bric and give it a custom class to apply height, width and an image background. Then drop text into the div and use more classes to get placement as you wish for the text.

It’s rare actualy img tags are used when other objects need to be placed over them as it requires negative margins, which isn’t as responsive friendly as the div container approach.


#5

Hello,

Here’s a quick video tut. :wink:


#6

wow…Thank you…thank you!
Works like a charm :relaxed:


#7

I appreciate it Norm. BLOCS is a life saver and the possibilities are impeccable.


#8

Hi @Norm and @Jakerlund,
I’m back in the case of "Place text on Image, where Jakerlund have made very clear video how to do it. But now when the image is on the Div, I can’t made the image to be as a Lightbox. Is there any solution for this.


#9

The easiest solution using a Lightbox is to just use a image editor and place the text on the image. Yes, it’s old school but sometimes old school is still good. A lot less trouble!

Casey


#10

For some reason I can’t get this to work. The problem is that some pictures show and some don’t show in the “empty container”. Naturally the picture I wanna us is one of them… Can’t figure out whats wrong with it.


#11

You can force the lightbox function quite easily. Just follow the instructions for adding text through a DIV and creating the background image as required.

Somewhere in the div, add an svg image of a plus or magnifier icon. Set the interaction on the icon image to open in a lighbox and set an alternative image as shown in the illustration below. If you want to just use the Blocs inbuilt icon, just use a blank (transparent) svg or png. However, you should make it large enough to trigger the built in icon when hovering over the centre of the image.

And here is the alternative method using a blank (transparent) SVG

The added advantage of both options is that you can use a darkened image (to make the text more legible) as the background to the DIV and use the original (not darkened) image in the lightbox.


#13

I watched the video of Jakerlund over and over and tried and tried, but I can’t get it to work. It places the text above the photo not on the photo.

Can somebody please help?


#14

You have to add the text box to the div so that it is INSIDE the div. If you drop the text box above the div, it will just stay above the image. You will notice in the video that the div is highlighted when dropping the text box. If all you see is the normal blue line when you hover over the div, just move down a little until the whole div is highlighted before dropping the text box.