Jump to content

Reveal text with hover on gallery

Go to solution Solved by Beyondspace,

Recommended Posts

  • Replies 7
  • Views 470
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Beyondspace
Beyondspace

We can achieve this layout by using the image section (Simple style) Note: Set Captions on After that, we can use the CSS code: .gallery-grid-item { position: relative; } .galler

Posted Images

  • Solution
Beyondspace Level 14

Beyondspace

Posted
  • Solution
Posted
2 hours ago, bellamalia said:

Hello all, im trying to create something to where I can reveal text over hover on the Squarespace gallery such as this website has: https://www.emilyraerose.com/

any thoughts/ suggestions? 

pass: alaina

We can achieve this layout by using the image section (Simple style)

image.thumb.png.7c8e75881d4f20c4b7d92461563023b9.png

Note: Set Captions on

After that, we can use the CSS code: 


.gallery-grid-item {
  position: relative;
}
.gallery-grid-item:hover .gallery-grid-lightbox-link {
  background: #000;
}

.gallery-grid-item:hover .gallery-grid-lightbox-link img {
  opacity: 0.6;
}
.gallery-caption.gallery-caption-grid-simple  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
}

.gallery-grid-item:hover .gallery-caption-grid-simple  {
  opacity: 1;
  transition: none;
}
.gallery-caption-content {
  text-align: center;
  color: #fff;
}

My testing

image.thumb.png.46f6b6b73df695c18bbccf1a53460e5a.png

Let me know how it works

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
bellamalia Level 2

bellamalia

Posted
  • Author
Posted

Hi beyondspace, thank you so much. This worked out wonderfully. I'm wondering, to make the font more bold or change the color - how can I change/ adjust in the code? and how can I make the background more black opacity when hovering? thank you again!

Link to comment
Beyondspace Level 14

Beyondspace

Posted
Posted

You can 

5 hours ago, bellamalia said:

make the font more bold or change the color - how can I change/ adjust in the code?

You can add some additional styles to the following selector 

.gallery-caption-content

with font-weight = 700 change the 'color' attribute to the color you want

5 hours ago, bellamalia said:

make the background more black opacity when hovering

=> Decrease the opacity value to this selector 

.gallery-grid-item:hover .gallery-grid-lightbox-link img

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
Beyondspace Level 14

Beyondspace

Posted
Posted
4 hours ago, bellamalia said:

im also wondering, how can i create a transparent background for the product scroll? I've attached an image. thank you for the help!! 

Screenshot 2024-03-27 at 1.49.58 PM.png

Can you provide your url site?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
Beyondspace Level 14

Beyondspace

Posted
Posted

I can not see any products. Have you added them yet?

image.thumb.png.af4bb7e0425dc8c70c25d85f4fdea4b0.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources