title: Can you fix a div and make it change opacity, size and position as you scroll with CSS3
body: <p>I'm not even sure how to search this question. But effectively I'm trying to figure out how this website is achieving this fixed opacity/size changing effect on their table: <a href="http://sqlzoo.net/wiki/SELECT_within_SELECT_Tutorial" rel="nofollow">http://sqlzoo.net/wiki/SELECT_within_SELECT_Tutorial</a> . If you scroll down you'll see the effect on the table. When you hover over it it pops out having the data more visible. </p>
  
  <p>The only thing I can think of is using a fixed div that when scrolled past a certain point triggers a jquery UI event that shrinks while decreasing opacity and then an on hover event that reverses this effect.</p>
  
  <p>Achieving this animation in the way I described above seems inefficient and I'm not sure if more (or all) can be done with CSS3. So basically can you achieve the effect shown on the page provided completely or almost completely in CSS3. </p>
  
  <p>Also i looked at the source of the page and couldn't fish it out of the css and scripts they include.</p>
  
  <p>Here's a fiddle of what I have so far. Haven't started on scrolling yet: </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="stuff"&gt;Blahblah&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div {
      width:250px;
      height:250px;
      border:2px solid #a1a1a1;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$( "#stuff" ).click(function() {
    $( "#stuff" ).animate({
      width: "20%",
        height:"20px",
      opacity: 0.4
    }, 1500 );
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/thed0ctor/1kx5jg1e/" rel="nofollow">http://jsfiddle.net/thed0ctor/1kx5jg1e/</a></p>