Hover text on image - CSS not working

Hello, I had a post in another section but adding to here instead as it is CSS related.

I have created an image gallery using fluid engine and am trying to add a text overlay on hover. I've created my images and my text boxes and tried to apply the code below (using the text block ID), but it's not working:

@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1696990279384_11181 {
opacity: 0;
 transition: opacity 1s
}

#block-yui_3_17_2_1_1696990279384_11181:hover {
opacity: 1;
transition: opacity 1s
}
}

Instead,  it seems to be doing something odd - when the page loads, it's showing the gallery image and then transitioning to my hover text, but it's not actually doing anything on hover as it should.

Any ideas on why this might not be working?

Thank you

49 minutes ago, SPR_85 said:

Hello, I had a post in another section but adding to here instead as it is CSS related.

I have created an image gallery using fluid engine and am trying to add a text overlay on hover. I've created my images and my text boxes and tried to apply the code below (using the text block ID), but it's not working:

@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1696990279384_11181 {
opacity: 0;
 transition: opacity 1s
}

#block-yui_3_17_2_1_1696990279384_11181:hover {
opacity: 1;
transition: opacity 1s
}
}

Instead,  it seems to be doing something odd - when the page loads, it's showing the gallery image and then transitioning to my hover text, but it's not actually doing anything on hover as it should.

Any ideas on why this might not be working?

Thank you

Can you share your website page URL where the gallery?

@Web_Solutions yes - 

URL: https://pineapple-apple-52zp.squarespace.com/config/pages

Password: Test1234

3 minutes ago, SPR_85 said:

@Web_Solutions yes - 

URL: https://pineapple-apple-52zp.squarespace.com/config/pages

Password: Test1234

I just see it. Where is the gallery?

@Web_Solutions it is my homepage - "home" - if you scroll down, it's the recent projects section as per the attached screenshot.

Thank you

5 hours ago, SPR_85 said:

@Web_Solutions it is my homepage - "home" - if you scroll down, it's the recent projects section as per the attached screenshot.

Thank you

Can you send me the Home page link? I can just see this

@Web_Solutions yes, here you are: https://pineapple-apple-52zp.squarespace.com/hometemp

Slug is "hometemp"

Thank you

10 minutes ago, SPR_85 said:

@Web_Solutions yes, here you are: https://pineapple-apple-52zp.squarespace.com/hometemp

Slug is "hometemp"

Thank you

You have disabled the page. That's why I can't see the page. You should enable the page.

@Web_Solutions 

 I have now enabled the page, please let me know if you can access it at the below: 

https://pineapple-apple-52zp.squarespace.com/config/pages

Thank you

5 hours ago, SPR_85 said:

@Web_Solutions 

 I have now enabled the page, please let me know if you can access it at the below: 

https://pineapple-apple-52zp.squarespace.com/config/pages

Thank you

I have fixed your code. Add these code below. I hope it will work. 

@media only screen and (min-width: 640px) {
  #block-yui_3_17_2_1_1696990279384_11181 {
    opacity:0 !important;
    transition: opacity 0.3s
  }
  #block-yui_3_17_2_1_1696990279384_11181:hover {
    opacity: 1 !important;
  }
}

@Web_Solutions that works now - thank you!

Please can you let me know how to adjust the opacity to be say 20%? I'd like to still see the image underneath on hover. 

Can you please also let me know how to speed up the transition?

I've tried adjusting both transition opacity and opacity in the code but it doesn't seem to be working. 

Thank you

3 hours ago, SPR_85 said:

@Web_Solutions that works now - thank you!

Please can you let me know how to adjust the opacity to be say 20%? I'd like to still see the image underneath on hover. 

Can you please also let me know how to speed up the transition?

I've tried adjusting both transition opacity and opacity in the code but it doesn't seem to be working. 

Thank you

Here is the update code

@media only screen and (min-width: 640px) {
  #block-yui_3_17_2_1_1696990279384_11181 {
    opacity: 0 !important;
    transition: 0.1s !important;
  }
  #block-yui_3_17_2_1_1696990279384_11181:hover {
    opacity: 80% !important;
  }
}