Responsive CSS3 pure image slider

I want to stack several responsive pure CSS3 image slider (or fade in / fade out) in the same page on top of each other.

I found many CSS3 image slider online, some responsive. None worked for me because the parent div #cf does not inherit the height of its child img, unless I specify the pixel height, in which case though it won't be truly responsive.

See example here: http://ift.tt/1NoavFd

I use for each image: width:100%; height:auto;

I can't stack many of these image slider on top of each other because they will overlap.

HTML

<div id="cf">
    <p>first carusel</p>
    <img class="bottom" src="http://ift.tt/1CZTKwO" />
    <img class="top" src="http://ift.tt/1CZTMoz" />
</div>
<div id="cf">
    <p>second carusel</p>
    <img class="bottom" src="http://ift.tt/1CZTKwO" />
    <img class="top" src="http://ift.tt/1CZTMoz" />
</div>

CSS

#cf {
    position:relative;
    width:50%;
    margin:0 auto;
}
#cf img {
    position:absolute;
    left:0;
    width:100%;
    height:auto;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
    opacity:0;
}