title: CSS same height as Parent
body: <p>So I have an image that needs a <code>hover</code> effect;</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div class="data"&gt;
      &lt;img src="http://scontent-a-dfw.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10809512_341410899374744_4010362_n.jpg"/&gt;
  
      &lt;div class="overlay"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> .data {
      width: 100px; 
      margin: auto; 
      padding: 5px; 
      height: auto; 
   }
   img {
      width: 100%; 
   }
   .overlay {
      width: 100%; 
      height: ___?; 
      background-color: blue; 
   }
  </code></pre>
  
  <p>As you can see, the height of <code>.data</code> is the same as the image. How can I make <code>.overlay</code> the same <code>height</code> of <code>.data</code>?</p>