You can do something like this.
css
Code:
.hoverthumb {
position: absolute;
border: 1px solid #ccc;
background: #333;
padding: 5px;
display: none;
color: #fff;
}
jquery
Code:
jQuery(document).ready(function($) {
xOffset = 10;
yOffset = 30;
$("a.thumbnail").hover(function(e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p class='hoverthumb'><img src='" + this.rel + "' />" + c + "</p>");
$(".hoverthumb").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
},
function() {
$(".hoverthumb").remove();
});
$("a.thumbnail").mousemove(function(e) {
$(".hoverthumb").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
});
});
add to your wp functions.php file
Code:
<?php
function custom_hover_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('jquery_hover', get_stylesheet_directory_uri() . '/js/hover.js');
wp_enqueue_style('jquery_hover', get_stylesheet_directory_uri() . '/css/hover.css');
}
add_action('wp_enqueue_scripts','custom_hover_scripts');
function hover_thumbnail($atts,$content) {
global $post;
$thumbnail = wp_get_attachment_url(get_post_thumbnail_id($post->ID));
$content = '<a href="'. get_permalink($post->ID) . '" class="thumbnail" rel="'. $thumbnail . '">'.get_the_title().'</a>';
return $content;
}
add_shortcode('hoverthumb', 'hover_thumbnail');
you can download it from here from my dropbox.
https://dl.dropboxusercontent.com/u/33687580/hover.zip