Jump to content

Adding a text hover to Gallery section.

Recommended Posts

I'm trying to duplicate the text hover effect from my portfolio page (pictured, top left image is hover) in a gallery section on another page using CSS.

I'm a CSS novice. I've managed to get the opacity hover, however I'm stuck on how to get the text description to display on hover.

.gallery-grid-item-wrapper:hover img {
  opacity: 0.8;
  transition: all ease-in-out 0.2s;
}
.gallery-item-description:hover img {
    opacity: 1;
}

Thanks, appreciate any help.

Screen Shot 2021-09-30 at 10.02.58 pm.png

Link to comment
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

2 hours ago, ShellJones said:

I'm still in my trial, so I don't think I can....?

If the site is in a trial you can set a password in the visibility settings and share this with us.

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
4 hours ago, ShellJones said:

Thank you.

https://maracas-tuatara-jskx.squarespace.com/ password is 'apple'

There are 4 gallery images on the homepage.

I'm trying to replicate the caption hover effect from the 'Projects' page onto these images on the homepage.

 

I'd also like to use the caption hover effect on 'Objects of Desire' page. 

Can you add some demo captions & enable Gallery caption first? We can check effect 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
23 hours ago, ShellJones said:

Have done now, thanks in advance.

 

Add to Design > Custom CSS

body.homepage {
figcaption.gallery-caption.gallery-caption-grid-simple {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s !important;
}

.gallery-grid-item-wrapper {
    position: relative !important;
}

figure.gallery-grid-item {
    position: relative !important;
}

p.gallery-caption-content {
    color: black;
    font-size: 2rem !important;
}

figure:hover figcaption.gallery-caption.gallery-caption-grid-simple {
    opacity: 1 !important;
    transition: all 0.3s !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
10 hours ago, ShellJones said:

Hey @tuanphanis it possible to do a similar text hover effect on the 'Library' page?

The captions are much longer though, so I'm not sure how that would work. 

 

https://maracas-tuatara-jskx.squarespace.com/ password is 'apple'

 

  • The images will be clickable or non-clickable?
  • You will add captions or non-caption?

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/13/2021 at 6:58 AM, ShellJones said:

Non-clickable. Captions yes, to reveal on hover. 

Use this CSS

/* Library page hover */
body#collection-614c0d638d723b5cb6c408e5 {
/* Masonry hover 2 */
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption, .gallery-caption-wrapper {
    position: static !important;
    z-index: 100 !important;
    top: unset;
    transform: unset;
    height: initial;
    opacity: 1 !important;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !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
  • 6 months later...
On 10/8/2021 at 1:38 AM, tuanphan said:

Add to Design > Custom CSS

body.homepage {
figcaption.gallery-caption.gallery-caption-grid-simple {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s !important;
}

.gallery-grid-item-wrapper {
    position: relative !important;
}

figure.gallery-grid-item {
    position: relative !important;
}

p.gallery-caption-content {
    color: black;
    font-size: 2rem !important;
}

figure:hover figcaption.gallery-caption.gallery-caption-grid-simple {
    opacity: 1 !important;
    transition: all 0.3s !important;
}
}

 

@tuanphan Love this code. I am using it with the 

p.gallery-caption-content {
    color: black;
    font-size: 2rem !important;
}

swapped from 'black' to 'white'.  Based on this code is there a way to add a darken feature to the image on hover so the white text stands out a bit more? Thank you in advance.

 

Link to comment
On 4/23/2022 at 6:16 AM, David_Ledger said:

@tuanphan Love this code. I am using it with the 

p.gallery-caption-content {
    color: black;
    font-size: 2rem !important;
}

swapped from 'black' to 'white'.  Based on this code is there a way to add a darken feature to the image on hover so the white text stands out a bit more? Thank you in advance.

 

Possible. However can you share link to gallery? We can give 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

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.