Change image block opacity when hovering over a separate button & text

My goal is to have an image appear behind the button & text when hovered. Currently I have this code so the image appears when hovering the image block itself, however when I hover the button & text the image disappears. 

This site is not published so I cannot link it unfortunately. 

This is the code I am using: 

/* Change Image on Hover */

#block-250fad1e70e306d0b461 {

  opacity: 0;

  -webkit-transition: opacity 0.3s ease-in-out;

  -moz-transition: opacity 0.3s ease-in-out;

  transition: opacity 0.3s ease-in-out;

}

#block-250fad1e70e306d0b461:hover {

  opacity: 1;

}

#block-fd00b0d93f11d2fe285a {

  opacity: 0;

  -webkit-transition: opacity 0.3s ease-in-out;

  -moz-transition: opacity 0.3s ease-in-out;

  transition: opacity 0.3s ease-in-out;

}

#block-fd00b0d93f11d2fe285a:hover {

  opacity: 1;

}

Hi,

Can you share page url? We can check easier

20 hours ago, tuanphan said:

Hi,

Can you share page url? We can check easier

Sorry the page the site is not live yet so you won't be able to see it.

You can follow this to share url

On 9/5/2023 at 10:36 PM, tuanphan said:

You can follow this to share url

 

Ah i see!

https://cricket-cheetah-f5bl.squarespace.com/config/settings/site-visibility

password is: 1234

Thank you

18 hours ago, kkester said:

Ah i see!

https://cricket-cheetah-f5bl.squarespace.com/config/settings/site-visibility

password is: 1234

Thank you

Try adding this to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $('.fe-block-81f4d34db1c1fbed616f, .fe-block-f9694e593abe4b71cc79').hover(function(){

      $(".fe-block-250fad1e70e306d0b461").addClass("show");  //Add the active class to the area is hovered
  }, function () {
      $(".fe-block-250fad1e70e306d0b461").removeClass("show");
  });
  
</script>
<style>
  .show, .show .image-block {
    opacity: 1 !important;
}

</style>

This code for right image. If it works fine, I will send code for left image

On 9/11/2023 at 8:19 PM, kkester said:

Quote

Try adding a common class to both the image block and the button/text container, then use that class for the hover effect. It should keep the image visible when hovering over either element. For example:

less
Copy code
.common-hover-class:hover #block-250fad1e70e306d0b461,
.common-hover-class:hover #block-fd00b0d93f11d2fe285a {
  opacity: 1;
}
This way, hovering over either element with the common class triggers the image visibility.

Ah i see!

https://cricket-cheetah-f5bl.squarespace.com/config/settings/site-visibility

password is: 1234

Thank you

https://cricket-cheetah-f5bl.squarespace.com/?noredirect

https://cricket-cheetah-f5bl.squarespace.com/?noredirect

@PeterCox1002 Which page are you referring to?