如何使div与CSS匹配图像高度

Question

Following js fiddle http://jsfiddle.net/9pn8Z/5/ 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.

My goal is to make height of rt_tileoverlay div, that slides on when image is hovered same as height of image. I would like to avoid javascript and just stick to css

Here is My code:

<div class="rt_tilewrap">
    <a href="www.google.com">
        <div class="rt_imgwrap">
            <div class="rt_tileoverlay"></div>
            <img class="rt_timg" src="http://i.imgur.com/cepjcsGb.jpg" /> 
         </div>
    </a>
    <div class="rt_tiletext">
        <p>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 .</p>
    </div>
</div>


.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 > .rt_tileoverlay {
     width:355px;
}

Thanks in adavnce for your suggestions for how to solve it.

Answer 1

You need to set the relative parent of the rt_tileoverlay to take the full height:

.rt_imgwrap{
    position:relative;
    overflow:hidden;
}

The demo http://jsfiddle.net/9pn8Z/6/