image enlarge on hover with content inside div box attached to image

Question

I was wondering if someone can guide me towards building a script where I can enlarge the image by hovering over with my mouse, but the image isn't only going to be enlarged, a div around the image will also be attached to it that appears when you hover

Thanks!

Answer 1

Easiest way. Put the code somewhere in your resizables.js file.

/**
 * Copyright 2012, Val Kotlarov Hoffman.
 * Licensed under the GPL Version 2 license.
 * You may copy freely and distribute as long as this comment remains.
 **/

$(document).ready(function(){ 
    init_resizeables();
});

function init_resizeables() {

    $('img').hover(
        function() { 
            $(this).stop().animate({
                'width':'444px'
            },{
                duration:234
            }).css({
                'z-index':'999', 
                'position':'absolute'
            });
        },
        function() { 
            $(this).stop().animate({
                'width':'254px'
            },{
                duration:345
            }).css({
                'z-index':'1'
            });
        });
}

The first with is the width of the zoomed image. The second width is image's normal size. Simply include this in your html file and you're done. Change the img selector to whatever you need. Enjoy.