.random-post-image-container { position: relative; width: 300px; height: 200px; cursor: pointer; overflow: hidden; } .image-placeholder { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0; color: #333; font-weight: bold; transition: opacity 0.3s ease; z-index: 2; } .random-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.3s ease; z-index: 1; } .random-post-image-container:hover .image-placeholder { opacity: 0; } .random-post-image-container:hover .random-image { opacity: 1; } jQuery(document).ready(function($) { // Array to store post data let monopolyPosts = []; // Function to fetch posts from the 'monopoly' category function fetchMonopolyPosts() { $.ajax({ url: '', type: 'post', data: { action: 'get_monopoly_posts', nonce: '' }, success: function(response) { if(response.success && response.data.length > 0) { monopolyPosts = response.data; } } }); } // Fetch posts when page loads fetchMonopolyPosts(); // Function to display random post image on hover $('.random-post-image-container').on('mouseenter', function() { if(monopolyPosts.length > 0) { // Get random post from array const randomIndex = Math.floor(Math.random() * monopolyPosts.length); const randomPost = monopolyPosts[randomIndex]; // Set the background image $(this).find('.random-image').css('background-image', 'url(' + randomPost.image + ')'); } }); }); <?php // Add this code to your theme's functions.php file or use a plugin like Code Snippets function register_monopoly_posts_ajax() { add_action('wp_ajax_get_monopoly_posts', 'get_monopoly_posts'); add_action('wp_ajax_nopriv_get_monopoly_posts', 'get_monopoly_posts'); } add_action('init', 'register_monopoly_posts_ajax'); function get_monopoly_posts() { // Verify nonce if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'get_monopoly_posts_nonce')) { wp_send_json_error('Invalid nonce'); } // Query posts from monopoly category $args = array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => -1, // Get all posts 'category_name' => 'monopoly', 'fields' => 'ids' // Only get post IDs for efficiency ); $posts = get_posts($args); $post_data = array(); foreach($posts as $post_id) { if(has_post_thumbnail($post_id)) { $post_data[] = array( 'id' => $post_id, 'title' => get_the_title($post_id), 'image' => get_the_post_thumbnail_url($post_id, 'medium') ); } } wp_send_json_success($post_data); } ?>