Adding a hover effect to simple gallery captions

Site URL: https://burgundy-watermelon-ld9d.squarespace.com

Hi, 

I'm relatively new to Squarespace and even newer to the use of custom CSS but I really would like to know if I am able to add a hover design to the gallery on my main page and still have the links working. What I want is to have a gallery with a main image and title that then links to a project page. I've figured out how to add the hover and customise the colour/text but now the links won't work to the project pages (they're not https links, just page links). I've tried to add in code in the image description area  to add clickable links but I can't seem to get it to work and it seems this could be quite a laborious task. I've included the code below that I used to make the hover style work (the code my not be in use on my site by the time someone looks as it as I'm doing a lot of work to it at the moment). What I would like is so the whole image is a link rather than just the text so that someone can click anywhere on each image in the gallery and go to the relevant project page. 

This is code that I've found online so not my own. The first part allowed me to customise the gallery captions which used to be below the image but I've since decided I want them to  be on the hover and the second longer part is for the image hovering. 

Also the password to the site is: Jasmine 

Any help would be really appreciated. Thanks!

// Gallery Caption Text //

.gallery-section .gallery-caption p {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  text-transform: normal;
  line-height: 1.2em;
  font-family: inherit;
}

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.2); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

change this code

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.2); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}

to this

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.2); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none;
}

On 5/12/2021 at 8:00 PM, JasmineP said:

Site URL: https://burgundy-watermelon-ld9d.squarespace.com

Hi, 

I'm relatively new to Squarespace and even newer to the use of custom CSS but I really would like to know if I am able to add a hover design to the gallery on my main page and still have the links working. What I want is to have a gallery with a main image and title that then links to a project page. I've figured out how to add the hover and customise the colour/text but now the links won't work to the project pages (they're not https links, just page links). I've tried to add in code in the image description area  to add clickable links but I can't seem to get it to work and it seems this could be quite a laborious task. I've included the code below that I used to make the hover style work (the code my not be in use on my site by the time someone looks as it as I'm doing a lot of work to it at the moment). What I would like is so the whole image is a link rather than just the text so that someone can click anywhere on each image in the gallery and go to the relevant project page. 

This is code that I've found online so not my own. The first part allowed me to customise the gallery captions which used to be below the image but I've since decided I want them to  be on the hover and the second longer part is for the image hovering. 

Also the password to the site is: Jasmine 

Any help would be really appreciated. Thanks!

 

// Gallery Caption Text //

.gallery-section .gallery-caption p {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  text-transform: normal;
  line-height: 1.2em;
  font-family: inherit;
}

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.2); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

 

I just made a simple tool for caption hovering, you may check it

https://beyondspace-showcase.squarespace.com/gallery-hovers

On 5/16/2021 at 4:34 AM, tuanphan said:

change this code

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.2); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}

to this

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.2); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none;
}

 

Hello! I have tried the code and changed what you mentioned but it isn’t working for me. I added it in the custom css. I want the homepage show an overlay of the images titles, but also, for the links to work, as they like for specific portfolio pages?  The website is http://www.Kiyary.com it’s public. I have also tried the code from this website with no result:  https://www.ghostplugins.com/steps/wj7238uh if you could help me it would be amazing. Thank you so much 🙂

15 hours ago, kiyary said:

Hello! I have tried the code and changed what you mentioned but it isn’t working for me. I added it in the custom css. I want the homepage show an overlay of the images titles, but also, for the links to work, as they like for specific portfolio pages?  The website is http://www.Kiyary.com it’s public. I have also tried the code from this website with no result:  https://www.ghostplugins.com/steps/wj7238uh if you could help me it would be amazing. Thank you so much 🙂

You want

• Hover image >> show overlay + title + keep it clickable
• Click image >> redirect to custom link, not use portfolio /work/ link?

9 hours ago, tuanphan said:

You want

• Hover image >> show overlay + title + keep it clickable
• Click image >> redirect to custom link, not use portfolio /work/ link?

Hello! 
yes, the image with a hover text (its title) , ->when clicked  -> sends you to a portfolio page/project (already created).
Just like creating a portfolio page, but since I cannot make it masonry style, I am using a gallery masonry grid. I don’t know if they will ever make the portfolio style masonry, that would solve it rly😂.

And add a portfolio icon like this: (image attached) on the projects navigation. 

alternatively, this is what I would love instead of the icon. If it were possible. Is there a way to open the link (project) above the gallery of images? Like in Avenue template. But in 7.1?

thank you so much!! I’ve read so many of your answers already in other questions.

19 hours ago, kiyary said:

Hello! 
yes, the image with a hover text (its title) , ->when clicked  -> sends you to a portfolio page/project (already created).
Just like creating a portfolio page, but since I cannot make it masonry style, I am using a gallery masonry grid. I don’t know if they will ever make the portfolio style masonry, that would solve it rly😂.

And add a portfolio icon like this: (image attached) on the projects navigation. 

alternatively, this is what I would love instead of the icon. If it were possible. Is there a way to open the link (project) above the gallery of images? Like in Avenue template. But in 7.1?

thank you so much!! I’ve read so many of your answers already in other questions.

Hi,

I don't see Masonry Title. Can you add some demo titles then we can test code easier?

2 hours ago, tuanphan said:

Hi,

I don't see Masonry Title. Can you add some demo titles then we can test code easier?

Hello Tuanphan, thank you so much.

What do you mean by masonry title?

actually the gallery masonry grid is on the home page. www.Kiyary.com which is where I want to add hover titles, and there are some masonry grids on each portfolio project, I would like to to show a title when the light box opens, if this is possible.

thanks so much again!

15 hours ago, kiyary said:

Hello Tuanphan, thank you so much.

What do you mean by masonry title?

actually the gallery masonry grid is on the home page. www.Kiyary.com which is where I want to add hover titles, and there are some masonry grids on each portfolio project, I would like to to show a title when the light box opens, if this is possible.

thanks so much again!

 

I mean

You want to achieve title  (caption) + overlay appear on hover.

However I don't see title, so no way to add title on hover. You need to add some title (caption) first, we can code easier

8 hours ago, tuanphan said:

I mean

You want to achieve title  (caption) + overlay appear on hover.

However I don't see title, so no way to add title on hover. You need to add some title (caption) first, we can code easier

Hello again!
They do have "titles", actually they are descriptions, not titles, I do not know how to add a title, since there's no option. the descriptions are just not showing, but all the images hace their descriptions. should I put them switch the "captions" to on? 

thank you 

Just in case I switched them on, but they don't show 😞 hahaha 

On 10/9/2021 at 5:37 PM, kiyary said:

Just in case I switched them on, but they don't show 😞 hahaha 

Caption is description

Click Pencil to edit Gallery Section >> Click on Enable Caption to make it visible under image, then I can check code easier

Hello I did that, the captions are enabled, but they are not showing I do not know why, I will try again, Thank you

On 10/11/2021 at 3:01 AM, tuanphan said:

Caption is description

Click Pencil to edit Gallery Section >> Click on Enable Caption to make it visible under image, then I can check code easier

I removed this code:

// Gallery Caption Text //

.gallery-section .gallery-caption p {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  text-transform: normal;
  line-height: 1.2em;
  font-family: inherit;
}

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.2); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

Which was affecting the captions, now, they show. 🙂 thank you

Did you fix or still need help?

4 hours ago, tuanphan said:

Did you fix or still need help?

Hello, still need help.

I want that Hoover effect, but it doesn’t work, I don’t know why. https://www.ghostplugins.com/steps/wj7238uh I pasted this code but doesn’t work.

thank you.

23 hours ago, kiyary said:

Hello, still need help.

I want that Hoover effect, but it doesn’t work, I don’t know why. https://www.ghostplugins.com/steps/wj7238uh I pasted this code but doesn’t work.

thank you.

Don't remove any code. Add this to Design > Custom CSS

figure:hover .gallery-caption {
    opacity: 1 !important;
}
.gallery-caption {
    transition-delay: 100ms !important;
}

3 hours ago, tuanphan said:

Don't remove any code. Add this to Design > Custom CSS

figure:hover .gallery-caption {
    opacity: 1 !important;
}
.gallery-caption {
    transition-delay: 100ms !important;
}

 

Omg i love you!!! Thank you so much! That’s what i have been struggling with for so long lol. Thank you!!