Jump to content

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

Recommended Posts

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;

}

Screen Shot 2023-09-04 at 6.07.37 PM.png

Screen Shot 2023-09-04 at 6.07.28 PM.png

Link to comment
  • Replies 7
  • Views 2.9k
  • Created
  • Last Reply

Top Posters In This Topic

18 hours ago, kkester said:

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
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

 

Edited by PeterCox1002
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.