Hover on Fixed Section

Hello,

For a page on my site, I'd like for a fixed image box to populate with the art that corresponds to their name within the list on the right on hover.

When the link is clicked, it then goes to their respective page.

Thank you!

Hi,

This will require JavaScript code (Business Plan or higher). Can you share link to page in screenshot?

Ok great. It is currently running on the business plan.

The page is: https://www.armatureprojects.com/artists-main

Thank you in advance!

Hi @tuanphan!

Would you happen to have any additional insight regarding the coding for this page?

You have 22 links, so you will need 22 Image Blocks

Because you have 1 image block only, so you can use this code. Code will work with first link Jerry Adams only

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
// Jerrry J Adams
  $('.fe-block-751b927d69a6874ab9f2 p:nth-child(1) a').hover(function(){
    $(".fe-block-bd5063a863d9fd084227").addClass("show");
    }, function(){
    $('.fe-block-bd5063a863d9fd084227').removeClass("show");
    }
  );
});
</script>
<style>
  .fe-block-bd5063a863d9fd084227 {
  opacity: 0;
  transition: all 0.5s ease;
  }
  .show {
  	opacity: 1 !important;
     transition: all 0.5s ease;
  }
</style>

See video: https://www.loom.com/share/b24c8b0ea8d54791942f7a08dde24425

Thank you! I see how that is working.

So in order to repeat this for each artist, I should create new image blocks on that page?

Also, my goal is to have one image always showing by default. When you visit the "artists" page, there will be an image already highlighted.

How can I have one image always showing and then the other images replace it as you hover over other names?

I appreciate your time!

On 3/12/2023 at 4:30 AM, sofinodesign said:

Thank you! I see how that is working.

So in order to repeat this for each artist, I should create new image blocks on that page?

Also, my goal is to have one image always showing by default. When you visit the "artists" page, there will be an image already highlighted.

How can I have one image always showing and then the other images replace it as you hover over other names?

I appreciate your time!

 

Yes. You need to add all images, then I can give new code

When you add all, I can adjust code to make first image always show on initial