Jump to content

Adding a hover effect to simple gallery captions

Recommended Posts

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;
}

 

Link to comment

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;
}

 

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

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
  • 4 months later...
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 🙂

Link to comment
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?

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
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 iconIf 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.

IMG_1603.jpeg

Link to comment
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 iconIf 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.

IMG_1603.jpeg

Hi,

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

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

 

F69BE36F-B24B-4DD8-800B-A64595B9BEF5.png

Link to comment
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!

 

F69BE36F-B24B-4DD8-800B-A64595B9BEF5.png

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

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

Screen Shot 2021-10-09 at 12.32.23.png

Link to comment
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

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

Link to comment
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;
}

 

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

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.