Saturday, August 24, 2013

How to Scale on Hover with Transition

This code will degrades gracefully for browsers (no change is seen, rather than an unanimated size bump).

Here full css code:


#blah { 
-webkit-transition: all .2s ease-in-out; 
 -moz-transition: all .2s ease-in-out; 
  -ms-transition: all .2s ease-in-out; 
     -o-transition: all .2s ease-in-out; 
        transition: all .2s ease-in-out; 
}
#blah:hover { 
-webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
      -ms-transform: scale(1.1); 
        -o-transform: scale(1.1); 
         transform: scale(1.1); 
}

Disqus Comments