Jump to content

Hover gallery

Recommended Posts

Site URL: https://chimes-bronze-p5sm.squarespace.com

Hi, can someone please help me with coding? I´m new to this, so maybe I´ve done something wrong. The hover effect on the gallery works perfectly with the color change (from color til grey), but the text seems to be delayed. Why?

I would like the text to show up at the same time as the color change. I´ve used this code: 

<style>

 .gallery-caption p{color:white!important}

.gallery-caption p{text-align:center} 
.gallery-caption p{font-size:2rem!important}

.gallery-masonry-item img:hover{filter:grayscale(100%)!important}

.gallery-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)}

.gallery-caption {opacity:0!important; transition-duration:0s}

.gallery-masonry-item:hover .gallery-caption {opacity:1!important; transition-duration:0s}
  
    .gallery-caption {
    pointer-events: none;
}

</style>

And one other thing; I would like to use this code only for desktop. How to I stop it from showing om mobile? 

Password: 1234

Thank you!  

Edited by Square_
Forgot to add password.
Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

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.