Image Slicing Effect on hover() with jQuery


jQuery one of the most popular JavaScript Library which helps a lot to designers, to make effective designs and animations for there clients. In this article we divide a full image into slices and repositioned it, and collect that slice on mouse hover.

<div id="imgSliceCon">
<div class="sliceCon">
<img src="img/Lighthouse.jpg" alt="WebOmnizz Slicing Effect" title="WebOmnizz Slicing Effect" />


CSS Section:

overflow: hidden;
width: 1024px;
height: 400px;
position: relative;
margin: 0 auto;
#imgSliceCon div.sliceCon{
position: relative;
width: 1024px;
height: 400px;
overflow: hidden;


jQuery Section:

Please make sure to add the jquery library before this jQuery snippet.

    var $sliceContainer = $(".sliceCon"),
    $containerWidth = $sliceContainer.width(),
    $containerHeight = $sliceContainer.height(),
    $numOfSlices = 10,
    $defaultTopMove = 10,

    $('img', $sliceContainer).css('display', 'none');

     for(var $i=0;$i<$numOfSlices;$i++) {
        $img = $sliceContainer.find('img').attr('src');

        var $html = "";

        $html += "<div class='img_"+$i+"' style='width:"+($containerWidth / $numOfSlices)+"px;height:"+$containerHeight+"px;left:"+($containerWidth / $numOfSlices * $i)+"px;position:absolute;overflow:hidden;'>";
        $html += "<img style='position:absolute;left:-"+($containerWidth / $numOfSlices * $i)+"px;"+($i % 2 != 0 ? "top:-"+$defaultTopMove+"px;": "")+"' src='"+$img+"'>";
        $html += "</div>";


    // Fix Image on Mouse Hover
        function() {
            // Mouse IN
            $(this).find('img').animate({top: "0px"}, 100);
            // Mouse Out
            // Reset Default Position
            for($j=0;$j<$numOfSlices;$j++) {
                if($j % 2 != 0)
                    $('.img_'+$j).find('img').animate({top: "-"+$defaultTopMove+"px"}, 100);


1 thought on “Image Slicing Effect on hover() with jQuery”

  1. Pingback: Create sticky footer with jquery and css

Leave a Comment

Your email address will not be published. Required fields are marked *

The reCAPTCHA verification period has expired. Please reload the page.