Jump to content

How do i add text overlay to my images using CSS?

Recommended Posts

16 hours ago, Matt83 said:

Thank you!

Password: Test1

Hover Image > Show text

 

It looks like you used new editor (Fluid Engine). Complex to achieve this effect with Fluid Engine Image Block.

You need to recreate with Classic Editor, it will be time-consuming to re-insert all photos.
I was thinking if there is a way to code the effect easily in the new editor.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

When you add section > Choose this > Then you can add Image Block with Caption (You can use Poster). Then we will give code to achieve hover text effect (You can try doing for 3-4 images, then we give code, if it works, you can do for all)

image.thumb.png.a0e1ef79cb3cc5909dcce65259fb2074.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Yeah unfortunately i dont see this caption option, all i see when adding an image block is content and design, under design its just fit, fill, shape, corner radius and a Lightbox option, thats it.  If there's no way to to it with CSS ill have to go back to 7.0 and rebuild which is a pain.

Link to comment
On 7/17/2022 at 12:15 AM, Matt83 said:

Yeah unfortunately i dont see this caption option, all i see when adding an image block is content and design, under design its just fit, fill, shape, corner radius and a Lightbox option, thats it.  If there's no way to to it with CSS ill have to go back to 7.0 and rebuild which is a pain.

See above screenshot, add Classic Editor Blank Section > Then add Image > Then you can see caption

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
13 hours ago, Matt83 said:

Ahh got it, thank you.  I can now add the classic editor blank section.  Ready to try the code!

When you add it, share url, we will check & give the code. Currently I don't see any image blocks in classic editor on /home page

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.