Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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 post
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

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

 

Link to post
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 BaNgan from 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, Portfolio hover Replace Link Style
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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...