enavu webdevmania tutsvalley psdestination
visit the enavu network
28 Comments Article Title Overlay Article Title

Image splitting effect with CSS and JQuery

In this tutorial we are going to make an image splitting effect. What’s that? It’s simillar to a sliding door effect where the image slides to left or right side and reveals the text behind it, but the thing that makes this different is that the effect looks like the image is splitted into half and one goes left and the other one goes right. One thing that’s very important is that there won’t be 2 images, it’s only one :)

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Demo Source

What’s the effect? Look bellow :)

1

IMPORANT: There aren’t 2 different images, it’s only one.

Let’s start…

HTML

<!--START THE MAIN CONTAINER-->
<div class='box_container'>

        <!--START THE IMAGE PARTS HOLDER-->
        <div class='images_holder'>

            <!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION-->
            <div class='image_div left'><img class='box_image' src='img.jpg' style='width:300px'/></div>
            <div class='image_div right'><img class='box_image' src='img.jpg' style='width:300px'/></div>

            <!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW-->
            <div class='clear'></div>

        </div>
        <!--END THE IMAGE PARTS HOLDER-->

        <!--START THE TEXT-->
        Just some dummy text.
        <!--END THE TEXT-->

</div>
<!--END THE MAIN CONTAINER-->

2

Now, let’s make a CSS trick to show the first part of the image in one div and the second part in the other div.. It’s not hard.

CSS

    .box_container{
    position:relative; /* important */
    width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
    height:220px; /* important */
    overflow:hidden; /* hide the content that goes out of the div */
    /*just styling bellow*/
    background: black;
    color:white;
    }
    .images_holder{
    position:absolute; /* this is important, so the div is positioned on top of the text */
    }
    .image_div {
        position:relative; /* important so we can work with the left or right indent */
        overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
        width:50%; /* make it 50% of the whole images_holder */
        float:left; /* make then inline */
    }
    .right img{
        margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
    }
    .clear{
        clear:both;
    }

3

That’s it. Looks like one whole image, right? Well there are 2 images making it to look like it’s one. :)

Now the JQuery part, it’s actualy pretty simple, and simillar to the sliding door effect i wrote a tutorial about before.

JQuery

$(document).ready(function() {

        //when the user hovers over the div that contains our html...
        $('.box_container').hover(function(){
            //... we get the width of the div and split it by 2  ...
            var width = $(this).outerWidth() / 2;
            /*... and using that width we move the left "part" of the image to left and right "part"
            to right by changing it's indent from left side or right side... '*/
            $(this).find('.left').animate({ right : width },{queue:false,duration:300});
            $(this).find('.right').animate({ left : width },{queue:false,duration:300});
        }, function(){
            //... and when he hovers out we get the images back to their's starting position using the same function... '
            $(this).find('.left').animate({ right : 0 },{queue:false,duration:300});
            $(this).find('.right').animate({ left : 0 },{queue:false,duration:300});
            //... close it and that's it
        });

});

Final words

And that’s it, we created a really nice splitting image sliding door efect without using 2 images :)

Related posts:

  1. Sliding door effect with JQuery
  2. Making A Cool Thumbnail Effect With Zoom And Sliding Captions
  3. Cool navigation menu made with JQuery
  4. Making image captions using jQuery
  5. Curtains Opening Animation with jQuery

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

  • instead of having 2 divs with the same image in couldn’t you just add some jquery code to duplicate the 1 image with div and append the left/right css classes.

  • @james Yes, but i think it’s easier to understand how the effect works this way when the HTML is the same as it will be when page loads.

    @win now Don’t mention it :) That’s why i’m here

  • Can I use this for my art website to show development/finished work? Do you mind?

  • Of course you can use it :)

  • could be usefull!

  • Hi, I really like this tutorial. I was wondering if it’s possible to add a web link into the the sliding door?

    thanks

  • I love your tutorial and want to use it for my site. I have followed every step of the way right through…i.e all your coding………but just can’t get it to be one image in the last stage.?
    I really would appreciate any kind of help on this lovely project that I so want to work on
    thanks in advance
    Stan

  • @stan – You can hire me to help you out if you like, i really can’t afford doing free work, there are a lot of request for help and if i help everyone i won’t have any time left to write new posts. Sorry. If you’re interested in hiring me send over a message using the contact form.

  • Hi, i like the tutorial and would like to use it on my project, so started to make it and i had the problems until i solve it whith moving the right one this double .right class. Because there was to images next to each other and it doesn’t look good enough.
    Maby thi class myst be whith double .right but for me i solve it whith one…
    Thanks again
    # .rightright img{
    # margin-left: -100%;

  • OMG….I solve the problem by moving the extra ‘right’ from the (.rightright class img ). Coz there was two times .rightright on class, i dont know if this should be like this but for me it works.
    Sorry for the terrible prev. comment.

  • Thank you for your great tutorial – i like it very much!

    Ich have the same question like CodeR33d:
    I put some links behide the sliding door, but I can’t click them.

    It’s the same like in your example with the easing-plugin. Can’t click at link to the easing-plugin.

    Do you have any idea how to fix this?
    Tank you.

  • Hi,
    Fantastic idea.
    I have the same issue as CodeR33d and nepf with links behind the doors.
    Works in IE6 of all places but not Firefox. Is this an event propagation issue ?
    Any help would be appreciated.
    regards
    mikec

  • Hi, I really like this tutorial. I was wondering if it’s possible to add a web link into the the sliding door?
    Or simply, it is possible to insert a link or image with a link inside the div or this sliding door are only for incorporate a image or text without link ?

    Help very appreciated, thank !

    samourai62

  • Good tutorial. Tks.

  • Very nice tut! Thumbs up!

  • what about the bouncing doors and the easing plugin?

  • Hello,

    I love this effect (so does my boss – yahoo!!!), but I bumped in to a problem. Here is the thing – you tutorial/demo set up for incomplete DOCTYPE – . And looks like it works for Safari and Firefox, but does not for IE. Once set up for complete DOCTYPE – and combined with all other elements on the page sliding effect doesn’t work:( :( :(
    Any solution for that? I looked through thousands and thousands of pages and there is nothing that near as cool as this effect, so it would be a major bummer to miss it. HELP, plz!

  • DOCTYPE of this effect is incomplete. Once combined with other elements on the page with proper DOCTYPE the effect doesn’t work:( Any chance to fix it? Thanks.

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting