How to display featured image of HOVERED wordpress post in a specific DIV?

Question

I want to make my websites first page so you have posts listed with only titles and meta.

When you found something interesting you'd put the cursor on the title (linking to the post) and that would display a featured image beside (either on a specific spot on the site or offset just enough to not cover any of the text or replacing the cursor).

Here is an example in action:

example of hover effect

I would put this code in a PHP snippet that I would add to a page with a shortcode. Right now the best I have is this:

<?php
echo '<div class="feauturedImg">';
$args = array('page_id => );
$featured_image = get_posts($args);
foreach($featured_image as $image) : setup_postdata($image);
   echo the_post_thumbnail();
endforeach;
wp_reset_postdata();
echo '</div>';
?> 

It should make a div and display the featured image inside it. I need to get the featured image of whichever post is being hovered dynamically. This is how I'd get the link of a hovered post in JS but I don't know how or if it's even possible to implement it.

I would need to pass it in to the PHP and get the post ID from it:

<script>
$('.hoverLink').hover(
    function(){
      var myHref = $(this).attr('href');
    }, 
    function(){
      $('.hoverDetail').remove();
    });
</script>)

Basically I need a way to get the hovered link from a JS or a way to save a hovered link into a PHP variable to than put it in url_to_postid() function and get the ID of the post to put into this section:

$args = array('page_id => ); 

(first PHP code) to display the right image.

Any ideas?