מעבר בקרוספייד בין שתי תמונות

הי.
אני מנסה לעשות קרוספייד בין שתי תמונות באלמנטור.
הוספתי אלמנט HTML עם הקוד הבא:

<a href="link">
<div id="cf">
<img class="bottom" src="bottom img" />
<img class="top" src="top img" />
</div>
</a>

ואת ה CSS הבא:
‪#‎cf‬ img.bottom {
opacity:0;
}
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-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;
}
#cf img.bottom:hover {
opacity:1;
}
הבעיה שלי היא שאני לא מצליח לגרום לתמונה התחתונה להיות נסתרת לפני המעבר עם העכבר, כך שהיא מציצה מעט מבעד לתמונה המקורית.