title: How to make div to match image height with CSS
body: <p>Following js fiddle <a href="http://jsfiddle.net/9pn8Z/5/">http://jsfiddle.net/9pn8Z/5/</a> contains element I'm currently working on. This is part of page layout, it will be duplicated with diffrent images. While width of image is fixed, height varies and i got problem with that. Element will come in one of few widths, height would vary depending on size of source image. </p>
  
  <p>My goal is to make height of <strong>rt_tileoverlay</strong> div, that slides on when image is hovered same as height of image. I would like to avoid javascript and just stick to css</p>
  
  <p>Here is My code:</p>
  
  <pre><code>&lt;div class="rt_tilewrap"&gt;
      &lt;a href="www.google.com"&gt;
          &lt;div class="rt_imgwrap"&gt;
              &lt;div class="rt_tileoverlay"&gt;&lt;/div&gt;
              &lt;img class="rt_timg" src="http://i.imgur.com/cepjcsGb.jpg" /&gt; 
           &lt;/div&gt;
      &lt;/a&gt;
      &lt;div class="rt_tiletext"&gt;
          &lt;p&gt;wards are focused oni wards are focused oni
          wards ards are focused oni wards areds are focused oni
          wards are focused oni wards are focused oni wards are
          focused oni wards are focu wards are focused i .&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  .rt_tilewrap {
      padding: 10px;
      display: inline-block;
      text-align: left;
      vertical-align: top;
      background: rgba( 22, 255, 22, 0.3);
      width:355px;
  }
  
  .rt_tiletext {
      padding: 5px 0 5px 0;
      color: #666666;
      float:left;
      line-height: 1.1em;
      text-align: justify;
      display: block;
      background:skyblue;
  }
  
  .rt_tiletext p{
      padding: 0;
      margin: 0;
  }
  
  .rt_timg {
      width: 100%;
      height: auto;
      display:block;
      position: relative;
      float:left;
  }
  
  .rt_imgwrap{
      overflow:hidden;
  }
  
  .rt_tileoverlay {
      height: 100%;
      width: 0;
      color:white;
      overflow:hidden;
      position: absolute;
      background-color: rgba(255, 255,0,  0.5);
      transition: all 0.4s ease-in-out;
      position: margin-top: 0px;
      margin-left: 0px;
      -webkit-transition: all .4s ease;
      -moz-transition: all .4s ease;
      -ms-transition: all .4s ease;
      -o-transition: all .4s ease;
      transition: all .4s ease;
      z-index: 100;
  }
  
  .rt_imgwrap:hover &gt; .rt_tileoverlay {
       width:355px;
  }
  </code></pre>
  
  <p>Thanks in adavnce for your suggestions for how to solve it.</p>