Showing Featured Image on Menu Hover

[ad_1]

Hi

I’m stuck on trying to accomplish this.

I have two divs next to each other, something like this.

`<div class=”container”><div class=”featured-image”></div><div class=”menu”></div></div>`

In the right div (.menu) I have a menu populated with my pages. It has a height of 100vh and vertical overflow is set to scroll.

In the left div (.featured-image) I am trying to display the featured image of the page the user is hovering over the menu link. I want the image to be vertically centered of the parent .container and not scroll as the menu scrolls. It can;t be position:fixed as once the user scrolls past the container div to see the rest of the page I want the featured-image to scroll up too.

Make sense?

So far the only thing online I think might work, doesn’t, and it’s the ajax method here.

[https://stackoverflow.com/questions/65324274/how-to-display-feautured-image-of-a-post-when-hovering-on-the-posts-link-wordpr])

I tried using the code here and it pulls the featured image, but then I can’t get it to stay in the parent and not scroll up with the menu.

[https://www.wpbeginner.com/plugins/how-to-easily-show-a-page-list-with-thumbnails-in-wordpress/])

This is what I’m after.

&#x200B;

[ad_2]