Hover script to get first post images in blogger

Hello, I'm new in this forum. I just googling for a script, but no result.

Does anyone know the script used in this blog (themespira[.]com)?

I mean the hover effect in post thumbnail. Normally, the post in homepage just show the thumbnail, but when hovered it show larger image (first post image) and also post title below it.

It,s also work for related post in single post item page.

Somebody please help me...

 

Hi it basically shows a element with position:absolute on mousemove. I extracted the key elements to show you

function screenshotPreview() {  
    /* CONFIG */      
        xOffset = 10;
        yOffset = 30;      
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result      
    /* END CONFIG */
    $("a.screenshot").hover(function(e){
        this.t = this.title;
        this.title = "";  
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='screenshot'><img alt='url preview' src='"+ this.rel +"'/>"+ c +"</p>");                               
        $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                      
    },
    function(){
        this.title = this.t;  
        $("#screenshot").remove();
    });  
    $("a.screenshot").mousemove(function(e){
        $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });          
};
// starting the script on page load
$(document).ready(function(){
    screenshotPreview();
});

HTML:

An example fiddle for you (http://jsfiddle.net/wgx3D/1/)

also this code originates from http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/

 

hello there,

this website use a Widget for blogger which show the Recent Articles with Thumbnails.. you can search for : Blogger Recent Post with thumbnails Hover.. you will get a lot of examples.. all what you have to do is to Tweak it in order to fit your website style...

Goodluck

 

Great script dude... sorry for my late response, i'm busy in real life

thanks for your suggestion... it's give me inspiration to combine blogger expr:data tag with AbstractChaos script above.

 

thanks man,.. both of you are great. now I get script works in my blog, nextemplates.blogspot.com