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

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

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?

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?

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

My testing result

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?

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

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

12 hours ago, bangank36 said:

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

Thank you so much. Working great!!