Jump to content

How to add caption overlay to image blocks + include a hyperlink in the same image

Recommended Posts

Hello! 

I'm building a website and want to add caption overlay to some images so when I hover the cursor over them they change color and captions appear (within these same images I would like to add links to videos as well)

Here is the website currently in progress

https://lanternfish-goose-wczf.squarespace.com/config/

I've included the images where I want to add the captions. 

Here is an example website of someone who has done this, incase I didn't explain it clearly enough!

https://www.lucas-sader.com/   (when you hover over their client list the captions come up)

 

Any help would be great! Thanks! 

Squarespace example.png

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

20 hours ago, cstearns said:

Hello! 

I'm building a website and want to add caption overlay to some images so when I hover the cursor over them they change color and captions appear (within these same images I would like to add links to videos as well)

Here is the website currently in progress

https://lanternfish-goose-wczf.squarespace.com/config/

I've included the images where I want to add the captions. 

Here is an example website of someone who has done this, incase I didn't explain it clearly enough!

https://www.lucas-sader.com/   (when you hover over their client list the captions come up)

 

Any help would be great! Thanks! 

Squarespace example.png

You can use the image section, show the caption then set some css code to make the caption visible when you hover

image.thumb.png.481473858b9e0f451fad4bf35314a171.png

Css you can try on Home > Design > Custom Css

.gallery-grid-item {
  position: relative;
}
.gallery-caption.gallery-caption-grid-simple {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  color: #fff;
  pointer-events:none; 
}
.gallery-grid-item:hover .gallery-caption-grid-simple{
  opacity: 1;
}


.gallery-grid-item .gallery-grid-item-wrapper:after {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: block;
  position: absolute;
  top:0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;

}

.gallery-grid-item:hover .gallery-grid-item-wrapper:after {
  opacity: 1;  
}

.gallery-caption.gallery-caption-grid-simple h3 {
  color: red;
}

May be you can add the section Id on my previous code to set the effect only on your target section

In addition, here is the advance effect you can consider. It requires javascript which is only available on business/ higher plan: 

Gallery Hovers — Beyondspace (squarespace.com)

Support me by pressing 👍  or marking as solution if this useful for you

Edited by Beyondspace

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...

This is great! 

Your code is working better than the Beyond Space Gallery Hovers! So I'm going with that option! 

My only other question is there a way to adjust the Font that pops up after hovering over the image? I can't seem to find which one it is - the font I have on it now is a little small and difficult to read. 

Thanks you! 🙂 

image.thumb.png.85837daf9203e2279e77dd2616e5f6bc.png

 

Link to comment
15 hours ago, cstearns said:

This is great! 

Your code is working better than the Beyond Space Gallery Hovers! So I'm going with that option! 

My only other question is there a way to adjust the Font that pops up after hovering over the image? I can't seem to find which one it is - the font I have on it now is a little small and difficult to read. 

Thanks you! 🙂 

image.thumb.png.85837daf9203e2279e77dd2616e5f6bc.png

 

Can you share the link to this element?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

This code has been super helpful!  

I'm struggling to keep the text from going edge to edge - is this something that you can help with? I tried using text: {margin: auto; width: 80%} on the blocks but then the text block is left aligned. 

.gallery-caption.gallery-caption-grid-simple {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text: {margin: auto; width: 80%}
  opacity: 0;
  transition: opacity 0.5s ease;
  color: #fff;
  pointer-events:none; 
}

Here is the sample page: https://truecallingmedia.com/new-tc-home

image.thumb.png.abb7ead362ba9a5e3d36f66ad9ba5194.png

Link to comment
On 1/14/2023 at 6:00 AM, JuliaFish said:

This code has been super helpful!  

I'm struggling to keep the text from going edge to edge - is this something that you can help with? I tried using text: {margin: auto; width: 80%} on the blocks but then the text block is left aligned. 

.gallery-caption.gallery-caption-grid-simple {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text: {margin: auto; width: 80%}
  opacity: 0;
  transition: opacity 0.5s ease;
  color: #fff;
  pointer-events:none; 
}

Here is the sample page: https://truecallingmedia.com/new-tc-home

image.thumb.png.abb7ead362ba9a5e3d36f66ad9ba5194.png

You mean reduce these padding?

image.thumb.png.3c914b78f28efabae341338e060a34b5.png

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

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.