CSS - jQuery move

trying to get smooth transistion !

by Ben Clayton

HTML

Square Div 1
<div class="square1">
    
</div>
Square Div 2
<div class="square2">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
<button id="but1">Move
</button>

CSS

img {
    width: 100%;
    height: 100%;
    transition: all 2s ease 2s ;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square1 {
    height: 75px;
    width: 75px;
    border:1px solid green;
}
.square2 {
    height: 175px;
    width: 175px;
    border:1px solid red;
}

JavaScript

$("#but1").on('click',function(){
	var $el = $(".square2 img").detach();
  $(".square1").append($el);
});