Get featured image on hover of post title [closed]

You can make use of properties on elements. Have a look at the following concept and see if you can use it.

1. You basically hide all “featured” images.
2. Add a general class to the post titles which you want to use to show/hide images.
3. Add a property to the post title element which holds the id of the image you want to show.

Generated MarkUp:

<img src="http://location/to/image.png" id="attachement-id-1" class="hide-it">
<a href="http://path/to/post">
    <h3 class="hover-show-attachment" hover-data="attachement-id-1">The Post Title 1</h3>
</a>
<img src="http://location/to/image.png" id="attachement-id-2" class="hide-it">
<a href="http://path/to/post">
    <h3 class="hover-show-attachment" hover-data="attachement-id-2">The Post Title 2</h3>
</a>

<script type="text/javascript">
    ( function( $ ) {
        $( '.hover-show-attachment' ).on( {
            mouseenter : function(){
                var attachment = $( this ).attr( 'hover-data' );
                $( '#' + attachment ).show();
            },
            mouseleave : function() {
                var attachment = $( this ).attr( 'hover-data' );
                $( '#' + attachment ).hide();
            }
        } );
    } )( jQuery || {} );
</script>

Alternatively you can use the hover-data property to hold the path/url to the image and when hovered it creates a new image element and show it and when exiting it will hide/remove the image.