Responsive Vertical Align for Relative Div in a Color Section

Hi,

I love Enfold and have had no problems at all, just one small quirk thats been giving me trouble… was wondering if anyone has any advice?

I created a Div to display a Before / After image effect on a portfolio page. I can’t seem to make it stay vertically aligned with other elements of the color section when the browser is resized though. I can make it perfectly aligned with either the top or bottom of the color section but not both at once… If the browser is full-size its no problem, however on mobile devices or a smaller screen it creates a huge whitespace between my div and the [special-heading] avia element. Is there possibly a simple solution to keep it from pushing other elements away?

My **current** code is:
HTML:

<div id="cf">
<img class="bottom" src="http://localhost/wp-content/uploads/2014/10/pat1_2comp.jpg" alt="" />
<img class="top" src="http://localhost/wp-content/uploads/2014/10/pat1_1comp.jpg" alt="" />
</div>

CSS:

#cf {
line-height: 0px;
position:relative;
width: auto;
height: 562px;
margin-top: -30%;
margin-bottom: 15px;
}

#cf img {
  position:absolute;
bottom: -1px;
  left:0;
  -webkit-transition: opacity 1.5s ease-in-out;
  -moz-transition: opacity 1.5s ease-in-out;
  -o-transition: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
}

#cf img.top:hover {
margin-bottom:-1px;
  opacity:0;
}

Thanks!!