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

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! 

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! 

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

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

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! 🙂 

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! 🙂 

 

Can you share the link to this element?

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

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

You mean reduce these padding?

Does this code work on a Masonry Grid? If so what do i change in this code?

On 1/12/2023 at 5:03 AM, Beyondspace said:

Can you share the link to this element?

Are you referring to the website link? 

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

The correct url should be without /config as it is the path to your admin dashboard
It is the right URL: https://lanternfish-goose-wczf.squarespace.com