Jump to content

Hover effect on a gallery in 7.1

Recommended Posts

Hi @laurenruth1,

This should get you close. You can play around with the opacity value to make it more or less opaque:

.gallery-grid-item-wrapper:hover img {
  opacity: 0.3;
}

 

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment

Thanks for letting me know @laurenruth1. If you could "vote up" the answer on the left, that will let others know it's a valid solution.

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
On 4/8/2020 at 12:58 PM, christyprice said:

Hi @laurenruth1,

This should get you close. You can play around with the opacity value to make it more or less opaque:


.gallery-grid-item-wrapper:hover img {
  opacity: 0.3;
}

 

Hi,

Do you know of a way to have text appear on a hover over in gallery blocks in 7.1? I just want to be able to display the name of the person in each photo in the gallery.

Thanks!

Link to comment
8 hours ago, WillH said:

Hi,

Do you know of a way to have text appear on a hover over in gallery blocks in 7.1? I just want to be able to display the name of the person in each photo in the gallery.

Thanks!

Try 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
13 hours ago, tuanphan said:

Try 

 

Thanks very much for this. It seems to be working for the most part, but is there a way for the text to only display on hover over? I have read through the original thread but havent seen anything about this.

Its also showing the image extension (.jpeg) as well. I have tried removing the ext in the file name but it still appears. Any way around this?

Thank you!

Edited by WillH
Link to comment
23 hours ago, WillH said:

Thanks very much for this. It seems to be working for the most part, but is there a way for the text to only display on hover over? I have read through the original thread but havent seen anything about this.

Its also showing the image extension (.jpeg) as well. I have tried removing the ext in the file name but it still appears. Any way around this?

Thank you!

Add to Home > Design > Custom CSS

.gallery-item-description {
    opacity: 0;
    transition: all ease-in-out 0.5s;
}
.gallery-item-description:hover {
    opacity: 1;
}

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...
On 4/8/2020 at 10:58 AM, christyprice said:

Hi @laurenruth1,

This should get you close. You can play around with the opacity value to make it more or less opaque:

.gallery-grid-item-wrapper:hover img {
  opacity: 0.3;
}

 

This worked nicely for me. Would you also have code to make the transition smoother between hover/non-hover? Something more like how the hover acts in the nav bar with the main CTA on the right (still in progress but a good example of the hover behavior I am seeking if possible!)

https://saffron-lychee-ydn6.squarespace.com/ron-rakow

PW: retro

It's not terrible as is but I'd love to refine it. It's the gallery under "EXPLORE MORE OF OUR ROSTER"

Thank you!

Link to comment
On 4/21/2022 at 11:07 AM, wonderpiece said:

This worked nicely for me. Would you also have code to make the transition smoother between hover/non-hover? Something more like how the hover acts in the nav bar with the main CTA on the right (still in progress but a good example of the hover behavior I am seeking if possible!)

https://saffron-lychee-ydn6.squarespace.com/ron-rakow

PW: retro

It's not terrible as is but I'd love to refine it. It's the gallery under "EXPLORE MORE OF OUR ROSTER"

Thank you!

Remove above code & use this new code

figure.gallery-grid-item .gallery-grid-image-link:after {
    content: "";
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
    transition: all 0.2s ease;
}
figure.gallery-grid-item:hover .gallery-grid-image-link:after {
    opacity: 1;
    transition: all 0.2s ease;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

I'm trying to figure this out too - basically, I want the same Text on Hover effect that is available in a Portfolio Page to be on my Gallery Block that I put onto a homepage - as in the image:

I wonder why they don't just make the same effect available....:) Or am I missing something?

And I don't want to make the Portfolio Page my homepage, because I want to format the clickthrough page differently than a Portfolio Page will allow....

Thank you for your help!
 

 

Screenshot 2023-05-01 at 5.39.19 PM.png

Edited by shannonborg
added some words
Link to comment
On 5/2/2023 at 7:41 AM, shannonborg said:

I'm trying to figure this out too - basically, I want the same Text on Hover effect that is available in a Portfolio Page to be on my Gallery Block that I put onto a homepage - as in the image:

I wonder why they don't just make the same effect available....:) Or am I missing something?

And I don't want to make the Portfolio Page my homepage, because I want to format the clickthrough page differently than a Portfolio Page will allow....

Thank you for your help!
 

 

Screenshot 2023-05-01 at 5.39.19 PM.png

Can you share link? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.