Kinda like the OS X Dock with no JavaScript

So, the following is kinda like the OS X Dock, but not really. The cool thing about it is that it achieves this effect using only HTML and CSS. That's right, folks, no JavaScript here! Just CSS transitions.

Note: this only works in WebKit-based browsers such as Safari and Chrome.

The following are the 2 CSS declarations that cause all this whiz-bang motion to happen.

#dock ul li a img {
  /* property that won't change */
  vertical-align: middle;
  
  /* properties that will change */
  margin: 32px 0;
  width: 40px;
  height: 40px;
  border: solid 1px #666;
  opacity: 0.5;
  
  /* define how the properties will transition
     from one state to the other */
  -webkit-transition: all 125ms ease;
}

#dock ul li a:hover img {
  /* properties that will change */
  margin: 0px;
  width: 100px;
  height: 100px;
  border: solid 3px #00c;
  opacity: 1.0;
}

Here's another example. This time, we're just acting on a single image when you hover over it. This one uses CSS transforms to make it go all spinny.

And, again, with the relevant code:

#frame a img {
  /* properties that won't change */
  width: 100px;
  height: 100px;
  
  /* properties that will change */
  margin: 2px;
  border: solid 1px #666;
  opacity: 0.5;
  
  /* define how the properties will transition
     from one state to the other */
  -webkit-transition: all 500ms cubic-bezier(0.8, 0.2, 0.2, 0.8);
  
  /* define the transform state for the image
     when it's not being hovered over */
  -webkit-transform: scale(0.4) rotate(0deg);
}

#frame a:hover img {
  margin: 0;
  border: solid 3px #00c;
  opacity: 1.0;
  
  /* define the transform state for the image
     when it is being hovered over */
  -webkit-transform: scale(1) rotate(720deg);
}