Jump to content

Vertical centre align heading text on hover over Impact (Brine) index gallery

Recommended Posts

Hello Squarespace Community!

I'm usually able to find the answers I need on here without having to ask the question myself, but this is the first time I've been stumped. I've read many similar questions to mine, but I haven't been able to find the answer I need, so I apologise if this has been asked before.

I'm using the Impact template (in the Brine family) and have an index gallery here:https://www.caveen.com/home#projects-home

I have used this CSS code to generate a coloured, transparent overlay with the image heading text when the image is hovered over:

    /* Gallery hover */
   .Index-gallery-item-content { 
      opacity: 0;
      transition: all .25s ease-in-out;
       min-width: 100%;
       min-height: 100%;

   .Index-gallery-item-content:hover {
      opacity: 1 !important;
        transition: all .25s ease-in-out;

The problem is I'm unable to get the heading text to align vertically in the centre of the overlay. When there is no


property, the text is vertically centralised, however then the overlay only reaches the height of the text, and I want it to cover the entire image, both for stylistic and UX purposes, as the hover will then trigger over the entire image, not just where the text will render. When the


property is set to


, the text is anchored to the top of the overlay.

I've tried setting the heading text to display as a table cell that can be vertically aligned with this CSS code but to no avail:

.Index-gallery-item-content h2 {
 display: table-cell;
 vertical-align: middle;

Am I missing something? Any help would be much appreciated as I'm a CSS novice.


Link to comment
  • Replies 4
  • Created
  • Last Reply

@caveen Use

section#projects-home h2.Index-gallery-item-content-heading {
   position: absolute;
   top: 50%;
   transform: translate(0,-50%);

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

This is great, thanks so much @tuanphan!

That's just created one niggle that I've not been able to fix: when the heading text is short enough to only cover one line, the text is anchored to the left of the overlay rather than centre aligned. When the text is long enough to go over two lines or more, it is centre aligned as it should be.

I've added

text-align: center !important

to the CSS code you provided above, but it's having no effect.

Any ideas?

Thanks, Sam

Link to comment


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.