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

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.