Pick an outfit

What will she wear?

Doll Sailor Outfit Casual Outfit Little Black Dress

How it works

1. Get your graphics ready.
2. Code HTML/CSS.
3. Insert javascript into HTML.

The HTML
<div class="dressup">
    <img class="doll" src="images/doll2.png" alt="Doll" title="Doll">
    <img class="outfit01 outfit" src="images/sailor.png" alt="Sailor Outfit" title="Sailor Outfit">
    <img class="outfit02 outfit" src="images/tshirt.png" alt="Casual Outfit" title="Casual Outfit">
    <img class="outfit03 outfit" src="images/lbd.png" alt="Little Black Dress" title="Little Black Dress">
</div>
The CSS
.dressup {
    position: relative;
    height: 500px;
}

.doll {
    position: absolute;
    left: 600px;
    z-index: 10;
}	  

.outfit01 {
    height: 300px;
    position: absolute;
    top: 100px;
    left: 50px;
    z-index: 20;
}

.outfit02 {
    height: 300px;
    position: absolute;
    top: 100px;
    left: 225px;
    z-index: 20;
}	  

.outfit03 {
    height: 300px;
    position: absolute;
    top: 100px;
    left: 400px;
    z-index: 20;
} 

.outfit-moved {
    height: 500px;
    position: absolute; 
    left: 600px; 
    top: 0px;
}  

.outfit {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
The Javascript
$( function() {
    var $outfit = $('.outfit');
        $outfit.click(function(){
            var $this = $(this);
            if($this.hasClass('outfit-moved')){
                $this.removeClass('outfit-moved');	
            }
            else {
                $outfit.removeClass('outfit-moved');
                $this.toggleClass('outfit-moved');		
            }
        });
} );