Jump to content

Hayden: Title hover over grid gallery

Recommended Posts

  • Replies 6
  • Created
  • Last Reply

I pretty much managed it using the following CSS:


.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
 display: block; 
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 padding-top: 12em;
 -webkit-transition: all 300ms ease-out; 
 -moz-transition: all 300ms ease-out; 
 -o-transition: all 300ms ease-out; 
 -ms-transition: all 300ms ease-out; 
 transition: all 300ms ease-out; }

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 background: rgba(240,240,240,0.8); }

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
 font-family: sans-serif, futura pt ;
 font-size: 14px;
 font-style: bold;
 text-transform: uppercase;
 letter-spacing:4px;
 color: #fff;
 opacity: 0; }

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 font-family: sans-serif, futura pt;
 font-size: 14px;
 font-style: bold;
 text-transform: uppercase;
 letter-spacing:4px;
 color: #000;
 opacity: 1; } 

However this CSS does not seem to work on the font which is not changing to 'futura pt' or to 'bold' as it should.

The click-though link of the images is also no longer working, how can I fix this?

www.chriswhiteside.com/home

Link to comment
  • 9 months later...
  • 3 months later...
  • 2 months later...

I've developed a commercial plugin that adds grid gallery block titles in front of the image with smooth hover effects.

So if a result like the image below is what you're after, check out the plugin here.

alt text

– Petri / Vox Pop

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 1 month later...

@HeartAndDash: you are so awesome for posting the code. Thank you! I'm seeing a lot of comments from people that the titles are no longer appearing! @emca closed the thread where you posted your fabulous answer, but something's not right with the code (per a bunch of comments) and if you can't post a reply there, maybe here?

Link to comment
  • 1 year later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now 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.