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

 

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

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

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

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

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.