Monday, 25 March 2013

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

3 comments:

  1. Guyes hope that you will like it.......:)

    ReplyDelete
  2. amazing page.........good work vedant keep it up...........

    ReplyDelete