Jump to content

Adding hover effect with a text to a gallery (Squarespace 7.0)

Recommended Posts

Site URL: https://erkindemir.net

Hello there. I want to implement a hover effect +text to my clickable gallery. Similar to this site which discussed  here before.

Tried codes from lots of forum topics but couldn't make a difference (possibly I'm not great with the custom css.)

Currently using 7.0 with Wells template. Is there anyone help me for adding this effect?

 

Thanks.

www.erkindemir.net

 

 

Link to comment
20 hours ago, ErkinDemir said:

Site URL: https://erkindemir.net

Hello there. I want to implement a hover effect +text to my clickable gallery. Similar to this site which discussed  here before.

Tried codes from lots of forum topics but couldn't make a difference (possibly I'm not great with the custom css.)

Currently using 7.0 with Wells template. Is there anyone help me for adding this effect?

 

Thanks.

www.erkindemir.net

 

 

Try the following code in Home > Design > Custom Css to set the hover effect

.image-slide-anchor:after {
  background: #fff;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity ease 200ms !important;
}

.image-slide-anchor:hover:after {
    opacity: .7;
}

I can find the text in your page, can you check it again?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
2 hours ago, bangank36 said:

Try the following code in Home > Design > Custom Css to set the hover effect

.image-slide-anchor:after {
  background: #fff;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity ease 200ms !important;
}

.image-slide-anchor:hover:after {
    opacity: .7;
}

I can find the text in your page, can you check it again?

Thank you so much!! the hover works, I unhide the texts now, but can only write them below the images. Do I need another code for writing them inside the image when hovering?

 

 

Link to comment
13 hours ago, ErkinDemir said:

Thank you so much!! the hover works, I unhide the texts now, but can only write them below the images. Do I need another code for writing them inside the image when hovering?

 

 

Hi, you can add this to your Custom Css

.image-slide-title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  margin-top: 0 !important;
  transition: opacity 0.3s linear;
  pointer-events: none;
}

.image-slide-anchor:hover + .image-slide-title {
  opacity: 1;
}

Let me know if it works properly on your site

Hope it can help you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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

My testing result

image.thumb.png.bccbecc5944996154faee65d1eef0aba.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
6 hours ago, bangank36 said:

Hi, you can add this to your Custom Css

.image-slide-title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  margin-top: 0 !important;
  transition: opacity 0.3s linear;
  pointer-events: none;
}

.image-slide-anchor:hover + .image-slide-title {
  opacity: 1;
}

Let me know if it works properly on your site

Hope it can help you

Thank you so much!! It works perfectly. One last question? Is it possible to apply this effect only selected pages and disable on other pages which also have galleries?

Link to comment
39 minutes ago, ErkinDemir said:

Thank you so much!! It works perfectly. One last question? Is it possible to apply this effect only selected pages and disable on other pages which also have galleries?

You can set this in a specific page by selecting the page id in Css code. Replace my previous codes with the following ones

#collection-6194f04471dc126cd439d19d .image-slide-anchor:after {
  background: #fff;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity ease 200ms !important;
}

#collection-6194f04471dc126cd439d19d .image-slide-anchor:hover:after {
  opacity: 0.7;
}

#collection-6194f04471dc126cd439d19d .image-slide-title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  margin-top: 0 !important;
  transition: opacity 0.3s linear;
  pointer-events: none;
}

#collection-6194f04471dc126cd439d19d
  .image-slide-anchor:hover
  + .image-slide-title {
  opacity: 1;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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

I 'd like to share you an extension - Squarespace ID Finder to get the element id of squarespace

Here is how to get the id page: http://recordit.co/qwnj09oNCa

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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

×
×
  • 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.