Text on top of images and images in a grid or staggered

  1. How to I add text over an image? I know that you can make and image the background in a section but I want two images in the section touching.

2.How can I create a hover box over the text on an image?

Hi there,

You can try adding an image element and a text element below it then add a negative margin to the text element so that it will get pushed up to the image making it look like an overlay text.

Style the text element below the image accordingly by setting a padding to the text element and a background to the text.

Hope this helps you get started.

Cheers!

How would I add a negative margin to the text element?

And how would I setting a padding to the text element and a background to the text?

thanks

Hi again,

  • You can adjust the margin of your Text element via Text element’s settings (see screenshot)

  • Using the Text element’s settings in Cornerstone you can similarly set the background color and padding of your Text element

To learn more about Cornerstone please see https://theme.co/apex/forum/t/cornerstone-content-builder-introduction/118

Hope this helps!

thanks for the help I can get the text where i want it but once i add the box the text is off alignment.

how can i align the text how i want and still have the box under it?

Hey Justin,

Please give us the URL of the page where you’ve added the text and also a screenshot of the issue so we can have a better idea of what’s going on. It would also be best if you could give us a sketch of what you’d like to achieve. Maybe we can give a more detailed setup steps.

Thanks.

Here is what I would like to achieve(just used random pictures…but you can see what I am trying to atchieve with the text on the shadow box and the button to see more pictures). (photo attached)

It is on the home page. www.fortknoxlasertag.com

This is how it is now you can see the text cutting off.

Here is an example of what I am trying to achieve

The text box being at the bottom of each photo with the text centered.

Hello There,

Thanks for updating in! What has been suggested is getting more and more complicated since you are not pretty much familiar with it. I would highly recommend that you check out other means by utilizing a grid plugin where in you simply upload images and text, a little tweaking of the settings and you will be all set to have grid display with text on hover of the images.

I would like you to check out some of the examples here:


And you can install this plugin by going to X > Validation > Extensions. For more details for each of this plugin, please check it out here: https://theme.co/apex/forum/t/extension-essential-grid/68, https://theme.co/apex/forum/t/extension-the-grid/74

The plugin method is the easiest way to achieve what you have in mind.

Hope this helps.

I am so close! All I need is for the grey shadow box under the text to be bigger (covering the whole red box I outlined). How do I do that?

Hey Justin,

Based on your previous description, using a grid plugin would be the best route.

If all you need is simply just opaque or shadow box to expand and contain just only a text, that could be accomplished by using a Gap and a Text element. I would not recommend your current setup since setting hard margins would be tricky to deal with.

Please see this screencast. Just pause and play the video to follow along as it’s a bit fast to save some time.

If you need buttons and hover effects, it would be best to use a grid plugin like @RueNel suggested.

Thanks.

Thanks for the vid

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.