Image crossfading image on hover

[tooth-paste]

I'am using this script to generate portfolio rows with Foundation. Now I would like to crossfade another image on hover. Is it possible to integrate the two IMG tags?

<div class="row rowpadding">
	<?php
		$items = $pages->get("/projecten/")->children;
		$i = 1;
		foreach ($items as $item) {
		echo "<div class='medium-6 small-12 columns'>
		<div class='image text-center'>
		<a href='{$item->url}'><img src='{$item->overzichtsthumb->first()->url}' alt='' />
		<p>$item->title</p></a>
		</div>";
		if($i % 2 == 0) {
		echo "</div></div>
		<div class='row rowpadding'>";}
		else {
		echo "</div>";}
		$i++;}
	?>
</div>

And both the image tags. The CSS is controlling the opacity.

<div id="cf">
  <img class="bottom" src="/images/first.jpg" />
  <img class="top" src="/images/second.jpg" />
</div> 

[tooth-paste]

Solved it myself. I added a new image field. thanks!