How to display feautured image of a post when hovering on the posts link (WordPress)?

Question

I want to make my website's first page so you have posts listed with only titles and meta (reader friendly, easy to load...).

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).

It's been done before, here is an example:

I'm assuming I'd have to use this to get the feautured image: get_the_post_thumbnail_url( int|WP_Post $post = null, string|array $size = 'post-thumbnail' ). The problem is I that I only know HTML and CSS, some very basic JS and have no clue about PHP. I found a couple examples on the web but couldn't get any to work.

Can you tell me how to get the image from the post link and display it (dynamically so it can work for any post link on the site)?

Thank you.

Answer 1

Try using this the_post_thumbnail(); it should display the post's image.

Check those:

https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/

https://codex.wordpress.org/Post_Thumbnails

https://smartwp.com/wordpress-get-featured-image/

Answer 2

You can add output of the_post_thumbnail inside a <div></div> tag which it is hidden, Then you can show it when mouse:hover has been happened. Structure is something like this:

<div class="featured-image">
   <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
   <php the_post_thumbnail( 'full' );   ?>
</div>

In css file you should set:

div.featured-image img{
    display:none;
}

When mouse hover has been occurred you should display Featured Image,Code will be something like this:

div.featured-image a:hover +  img{
    display: inline-block;
}

Answer 3

That's the first link when I googled it, so I will post solution here.

So I've achieved this effect by using Ajax:

AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps us to load data from the server without a browser page refresh.

Details: https://api.jquery.com/jquery.ajax/

Diagram is helpful in understanding: https://i.stack.imgur.com/Zqyrn.gif

I've created jQuery which is getting url from the hovered link and sends it through Ajax to a server, and if process is successful, it renders the data returned:

var hrefValue;

jQuery(document).ready(function($) {
    $('#bio-box').find('a').mouseover(function() {
        hrefValue = ($(this).attr('href'))
        //console.log(hrefValue)
        $.ajax({
            url: frontendajax.ajaxurl,
            type: 'POST', 
            data: {
                'action': 'image',
                'php_test': hrefValue
            },
            success: function(data){
                $('#featured-image').html(data);
                //console.log(data);
            }
        });
    });
}); 

This function generates the data:

function fimg() {
    if ( isset( $_POST['php_test'] ) ) {
        $testing = sanitize_text_field( wp_unslash( $_POST['php_test'] ) );
        $post_id = url_to_postid( $testing );
        echo get_the_post_thumbnail( $post_id );
    }
    die();
}
add_action( 'wp_ajax_image', 'fimg' );
add_action( 'wp_ajax_nopriv_image', 'fimg' );

HTML:

<div id="featured-image”>
</div>

It is working, and solves the problem. I hope it will help someone. Make notice that whole thing still needs some sanitation.