CSS3でバックグラウンドイメージをスライド

ある要素をマウスオーバーすると背景画像が変わる手法。ボタンなどでよく見かける視覚効果ですね。これに -webkit-transition プロパティでタイミングをとってやると面白い動きをするので、何かに利用できないかなぁと考えているところ。

.wp-logo-background {
  background: url(wp-logo-background.png) no-repeat 0 0;
  width: 250px;
  height: 75px;
  -webkit-transition: background-image, .5s;
  margin: 20px auto;
}
.wp-logo-background:hover {
  background-position: 0 -75px;
}

注意: WebKit独自拡張プロパティを使用しているのと、div 要素に :hover 擬似クラスを適用しているので、WebKit系ウェブブラウザでないと動作しません。