title: Div animated when hover
body: <p>i'm trying to make a responsive website, but i'm new to html5 and css3.
  The result i'm looking for you can see on this link, the effect on the pictures on the "team" part: <a href="http://evatheme.com/templates/white/index.html#team" rel="nofollow">http://evatheme.com/templates/white/index.html#team</a></p>
  
  <p>I have already tried to use transition for the width and background, also, i'm pretty confused on how to make the other element appear and disapear when hover.</p>
  
  <p>Can anyone help me? Or give some tips on what do i have to search?</p>
  
  <p>This is the code i was testing:</p>
  
  <p>CSS:</p>
  
  <pre><code>#test {
    width:300px;
    height:100px;
    background:blue;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */ }
  
  #teste {
    width:px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */ }
  
  .teste:hover { width:300px; }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="test"&gt;
     &lt;div id="teste" class="teste"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for the help.</p>