Amazing CSS transition

This transition is very amazing, this will open like a box very smoothly giving a transition effect.


The css code:-

div
{
width:100px;
height:200px;
background:green;
border:1px solid black;
box-shadow: 20px 10px 8px #888888;
transition: 2s;
-moz-transition: 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */

}

div:hover
{
width:300px;
height:200px;
background:green;
transition: 2s;
-moz-transition: 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
border: 3px solid black;
box-shadow: 20px 10px 8px #888888;
border-radius:12px;
overflow: hidden;
}


The HTML code :-

• This is the snapshot of the original div box.

• This is the snapshot of the div box on hover.

Webtey VJ