pure css page roll

HTML

<div id="code">
    <pre>

    As you know i avoid JavaScript
    as much as i can, reason is 
    simple - It force me to 
    think out of the box and even 
    more creatively. And lets me to
    unbound the power of CSS.
    Today we are here to learn a 
    cool page peel, or page fold
    effect with pure css.    
    </pre>
<img id="curl" src="https://lh5.googleusercontent.com/-_cUns2RNeVA/T2k7Y3D4y2I/AAAAAAAAAIs/4GX4dEn62Kg/s600/fold.png">
</div>

CSS

#curl{
    width:40px;
    height:40px;
    position:fixed;
    top:0;
    left:0;
     -webkit-transition: ease 1s;
     -moz-transition: ease 1s;
}
#curl:hover{
    width:300px;
    height:300px;
    
}
#code{
    background:#fffff;
    overflow:hidden;
    width:35px;
    height:35px;
    position:fixed;
    top:0;
    left:0;
    -webkit-transition: ease 1s;
    -moz-transition: ease 1s;
}
#code:hover{
    width:250px;
    height:450px;
    
    
}