Jump to content

How to add image caption VIA coding

Recommended Posts

Posted

Site URL: http://hilarybeckwith.com/main-page

Hello - Is there a way to add an image caption in the Stacked layout via code? I am trying to customize caption text to be as a centered overlay over an image, and I think I found coding for that. But I need to know how to add the actual text. 

Can I add HTML code to the Custom CSS window?  I'm afraid to mess it up!

I've attached a screenshot for reference - I would like to add the one-word text that is currently immediately below each image, to the center of the image instead, and change the stylings (which I think I can figure out).

Screen Shot 2021-08-31 at 12.53.43 PM.png

  • Replies 1
  • Views 549
  • Created
  • Last Reply
Posted

Add to Design > Custom CSS

/* List items-Text over image */
[data-section-id="612ee2e62200bd4633622d9b"] {
li:nth-child(1) .list-item-media-inner:after {
    content: "DISCOVER";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    z-index: 9999;
    text-align: center;
    color: white;
}
li:nth-child(2) .list-item-media-inner:after {
    content: "GET GROUNDED";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    z-index: 9999;
    text-align: center;
    color: white;
}
li:nth-child(3) .list-item-media-inner:after {
    content: "STAY ROOTED";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    z-index: 9999;
    text-align: center;
    color: white;
}
.list-item-media-inner:after {
    font-family: jubilat !important;
}
}

image.thumb.png.0363421b843dea89aab999aa895c830e.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!)

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.