Jump to content

Title placement on gallery

By Oddish, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

Oddish Level 4

Oddish

Posted
Posted

Hi, is it possible for the caption/title of gallery images to sit on top of the image in a grid:simple layout?

Ideally, it would sit bottom right hand corner of the image (with some margin) and with a coloured background behind the title text so its easy to read.

Any help with custom code would be appreciated!

  • Replies 4
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Oddish
Oddish

Thank you @tuanphan!!

Posted Images

Beyondspace Level 14

Beyondspace

Posted
Posted
6 hours ago, Oddish said:

Hi, is it possible for the caption/title of gallery images to sit on top of the image in a grid:simple layout?

Ideally, it would sit bottom right hand corner of the image (with some margin) and with a coloured background behind the title text so its easy to read.

Any help with custom code would be appreciated!

Can you share your URL to the section which you want to add caption/title? We can check it easier

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

  • Solution
tuanphan Level 18

tuanphan

Posted
  • Solution
Posted

First, you need to enable Gallery Grid Caption

Enable Gallery Caption 02 Min

Next, add some Text

Next, use this code to Website > Website Tools > Custom CSS 

figcaption.gallery-caption.gallery-caption-grid-simple {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    bottom: 0;
    text-align: right;
    padding: 0 !important;
}
figure.gallery-grid-item {
    position: relative;
}
figcaption.gallery-caption.gallery-caption-grid-simple p {
    color: white;
    margin-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

Result

image.thumb.png.2dcca12407d7eff8f9674433b4c14824.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!)

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources