Display 9 Hovering images in 3 x 3 grid

https://www.erichaviv.com/work/

I’m trying to get these images to line up in a 3×3 grid, with 10px padding between images. I can’t seem to get this work.

HTML code:

<div class="grid">

<!--THUMB 1-->
<div id="cf">
	<a href="https://youtu.be/tSAS8pRJ8nw?hd=1"><img class="bottom" src="<?php bloginfo('template_directory'); ?>/images/portfolio_thumbs/thumb2.jpg" />
	<img class="top" src="<?php bloginfo('template_directory'); ?>/images/portfolio_thumbs/thumb.jpg" /></a>
</div>	

<!--THUMB 2-->
<div id="cf">
	<a href="https://youtu.be/tSAS8pRJ8nw?hd=1"><img class="bottom" src="<?php bloginfo('template_directory'); ?>/images/portfolio_thumbs/thumb2.jpg" />
	<img class="top" src="<?php bloginfo('template_directory'); ?>/images/portfolio_thumbs/thumb.jpg" /></a>
</div>

CSS code:

#cf {
	position:relative;
	height:270px;
	width:160px;
	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;
	-ms-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
	opacity:0;
}			

.grid {
	float: left;
}

.grid img {
	float: left;
}