Jump to content

Add Text Overlay on Gallery 7.1 - Without Hover

Recommended Posts

Can someone help? I want some text headings to sit over the images in a gallery on 7.1. I have this code below but I DON'T want it to hover, just be there all the time. I've experimented to try and remove the hover myself but I just keep breaking it. I've put this in the code injection on the page with the gallery, and it looks perfect... but only on hover!

<style>
.gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  /* You can replace the color here with a different color */
  background-color: rgba(0,0,0,0); 
  height: 100%;
  max-width: unset;
  padding: 0;
  opacity: 0;
  -webkit-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
  -moz-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
  -o-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
  -ms-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
  transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
}

.gallery-caption-content {
  /* You can change the color of your image caption here */
  color: #FFFFFF;
  font-size: 40px !important;
  font-weight: 500 !important;
}

.gallery-caption-grid-simple {
  transition-delay: 0ms;
}

.gallery-caption {
  pointer-events: none;
}

.gallery-grid-item {
  position: relative;
}
.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}

.gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

Link to comment
  • Marcus_SQSP changed the title to Add Text Overlay on Gallery 7.1 - Without Hover
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.