Question

I’m creating an animated landing page using jQuery.

In the animation when the mouse is over a section of the image (which is sliced),
it pops out. Up till now I have been able to do this only if I set the sections’ positions to absolute. If they are not positioned absolute, they move once I enlarge and move out one of the sections.

Is there any way to get this effect without seting position to absolute?

Thank you!

Edit: This is the code I’m using

$(".block").mousemove(function () {
    $(this).css("z-index", "1010");
    $(this).stop().animate({
        "width": "170px",
        "height": "400px",
        "top": "-12px",
        "left": "-13px"
    }, {
        duration: 300,
        easing: "swing",
        queue: true
    });
});

$(".block").mouseleave(function () {
    $(this).stop().animate({
        "width": "149px",
        "height": "374px",
        "top": "0px",
        "left": "0px"
    }, {
        duration: 500,
        easing: "swing",
        queue: true,
        complete: function () {
            $(this).css("z-index", "1000");
        }
    });
});

Answer 1

A solution to your question could be this:

Right now each image is placed beside one another, right? Instead, try placing just white blocks beside one another as the placeholders to keep the dimensions and then place the images inside those boxes.

I don’t know your actual html code, but I can see you have six blocks in your example picture.

Below I have tried to set up a hover event on a very simple html box structure from the script you gave. In your script you had something about the z-index value and something to happen when complete. I have deleted that, since I couldn’t get the meaning of it or see it work with stop(), but you might edit this to match your wishes.

Also I don’t use much class or id, but that might be needed at a larger page.
EDIT: Make sure your divs have the exact same dimensions as the image they contain.

HTML

<div id="blocks">

    <!--The divs are the blocks - the imgs are the content-->
    <div><img src="block1.png"></div>
    <div><img src="block2.png"></div>
    <div><img src="block3.png"></div>
    <div><img src="block4.png"></div>
    <div><img src="block5.png"></div>
    <div><img src="block6.png"></div>

</div>

CSS

div#blocks { /*The wrapping box*/
    height: 200px;
    width: 300px;
    /*Remember to add paddings, margins, borders etc.*/
}

div#blocks div { /*Creating the blocks*/
    position: relative;
    float: left;
    height: 200px;
    width: 50px;
}

/*The images now fill nothing at all*/
div#blocks img {
    position: absolute;
    top: 0;
    left: 0;
}

Javascript

$("div#blocks img").hover(

    function(){ /*On mousein*/
    $(this).stop().animate({

        "width": $(this).width() + 20, /*Enlarging by 20 x 20px*/
        "height": $(this).width() + 20,
        "top": "-10px", /*Keeping image centeret*/
        "left": "-10px",
        "z-index": "10"

        }, {

        duration: 300,
        easing: "swing",
        queue: true

        });
    },
    function(){ /*On mouseout*/
    $(this).stop().animate({

        "width": $(this).width(), /*Returning to original size*/
        "height": $(this).width(),
        "top": "0px", /*Keeping image centeret*/
        "left": "0px",
        "z-index": "0"

        }, {

        duration: 500,
        easing: "swing",
        queue: true

        });
    }

);

PS: Untested, but quite simple. You can give it a try.