title: CSS3 background transitions
body: <p>So I want to recreate exactly that ribbon transition <a href="http://subtlepatterns.com/" rel="nofollow">http://subtlepatterns.com/</a> but I am doing smth wrong. My ribbon image is 140x160 [width,height] but by hovering nothing happens.</p>
  
  <p>I put:</p>
  
  <pre><code>#toplogo {
      position: absolute;
      left: 400px;
      background-position: 0px -10px;
      z-index: 5000;
  }
  
  
  #toplogo a {
      background: url('ribbon.png') no-repeat;
      width: 140px;
      height: 160px;
      display: block;
      background-position: 0px -10px;
      text-indent: -9999px;
      -webkit-transition: 0.10s ease-in;
      -moz-transition: 0.10s ease-in;
  }
  
  
  
  &lt;div id="toplogo"&gt; &lt;a href="/"&gt;hello&lt;/a&gt; &lt;/div&gt;
  </code></pre>