title: CSS3: parent element has hover, animated element inside
body: <pre><code>&lt;div style="width: 310px; height: 160px; position: relative;" class="feature-box"&gt;                          
      &lt;a href="" style="display: block; width: 310px; height: 160px; position: relative;"&gt;
          &lt;div class="feature-box-link"&gt;My Service&lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I'm trying to do is <code>CSS3 transition</code> the <code>div</code> within the <code>a</code> ... so when you <code>hover</code> over <code>feature-box a:hover</code> the <code>.feature-box-link</code> animates:</p>
  
  <pre><code>-webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  line-height: 19px;
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>line-height: 50px;
  background: #FF9E00;
  background: rgba(255, 158, 0, 0.75); 
  height: 40px;
  </code></pre>