title: CSS3 (or jQuery) Background Color Animation Vertically from Center of div
body: <p>I'm trying to create an effect like the right nav on this site:</p>
  
  <p><a href="http://dianabobar.com/" rel="nofollow noreferrer">http://dianabobar.com/</a></p>
  
  <p>With jQuery. The way the color opens up from the middle is the effect I'm going for but unfortunately that site is done in Flash so I don't have the option of studying how it's done. I'm not really sure what to search for. I was thinking something like 'background radial animation jquery' or 'background color animation from center jquery.'</p>
  
  <p>I also considered a CSS3 ease-in like they've detailed here (<a href="https://stackoverflow.com/questions/16147319/expand-background-from-center-css-javascript">Expand background from center (CSS / Javascript)</a>). The problem is that the answer on this question is only showing the CSS3 transition working horizontal when I'll need it to work vertically. I've worked with the JSFiddle that they were using on the answer (<a href="http://jsfiddle.net/SNzgs/" rel="nofollow noreferrer">http://jsfiddle.net/SNzgs/</a>) but I can only seem to get the transition to animate going down from the top and not out from the center. The code they have is:</p>
  
  <pre><code>.redline {background:red;height:10px;width:0;margin:auto;}
  
  .container:hover .redline {
      width:200px;
      -webkit-transition: all 0.3s ease-out;
      transition:all 0.3s ease-out;
  }
  </code></pre>
  
  <p>The code I tried was:</p>
  
  <pre><code>.redline {background:red;height:0px;width:10px;margin:auto;}
  
  .container:hover .redline {
      height:200px;
      -webkit-transition: all 0.3s ease-out;
      transition:all 0.3s ease-out;
  }
  </code></pre>
  
  <p>Thanks for your help!</p>