Jump to content

Make captions center align (after adding captions on hover css)

Recommended Posts

Site URL: https://kknomics.squarespace.com/deltakere

I've created a simple grid gallery and added CSS so that the captions would appear on hover. The captions are nicely centered when only using one line, but when a line breaks they're aligned to the left. How do I make the text remain centered?

This is the CSS I've used 🙂

.gallery-caption {

position: absolute;

top: 0;

left: 0;

background: rgba(232,78,27,0.6); /* overlay color */

height: 100%;

max-width: unset;

padding: 0;

opacity: 0;

pointer-events: none;

}

 

.gallery-caption-wrapper {

display: flex;

align-items: center; /* center vertically */

justify-content: center; /* center horizontally */

}

.gallery-caption-content {

font-size: 1.6rem !important; /* caption font size */

font-weight: 600 !important;

color: white; /*caption font color */

}

.gallery-grid-item {

position: relative;

}

.gallery-grid-item:hover .gallery-caption {

opacity: 1;

}

.gallery-caption-grid-simple {

transition-delay: 0ms;

}

Edited by Muntzer
Link to comment
  • Muntzer changed the title to Make captions center align (after adding captions on hover css)
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...
57 minutes ago, sequoyahimages said:

Hi! Where in the original code did you add this piece code to make it work?

Add to this

image.png.fdf0b699cd00df5a4b9d345030c54528.png

so it should be

image.png.5223ef3a3bf2f80ba34f3b20b16973f0.png

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

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.