caveen Posted July 22, 2019 Share Posted July 22, 2019 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 min-height 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 min-height property is set to 100% , 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. Thanks,Sam Link to comment
tuanphan Posted July 22, 2019 Share Posted July 22, 2019 @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
caveen Posted July 24, 2019 Author Share Posted July 24, 2019 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
tuanphan Posted July 24, 2019 Share Posted July 24, 2019 @caveen Use width: 100%; 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
caveen Posted July 25, 2019 Author Share Posted July 25, 2019 That worked a treat! Thanks for you help @tuanphan, it really is very appreciated. That had been bugging me for ages! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.