Hello! But help (safari/webkit users only)

[firefly431]

OK I was making a game display like the google images thing. (read something about css animation if you haven't) and I want my text to appear without the table resizing. I KNOW IM SUPPOSED TO USE DIVS but I started good with tables so I kept them. HERE IS MY PHP/HTML/CSS CODE: note: post[title] = title

<?php
$_POST['title'] = 'Games';
include("includes/header.php");?>
<style type="text/css">
table.games {
    table-layout: fixed;
}
td img.mouseOver {
	-webkit-transform:scale(1);
	-webkit-transform-origin:center;
	-webkit-transition-property: -webkit-transform, height;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in-out;
	overflow: hidden;
	height:64;
	position:relative;
	z-index:1;
}
td img.mouseOver:hover {
	-webkit-transform:scale(2,2);
	height:64px;
	z-index:2;
}
td.st {
	vertical-align: top;
	height:64px;
}
div.secret {
    -webkit-transform: scale(0);
	//overflow: hidden;
}
table.games tr td:hover div.secret {
    -webkit-transform: scale(1);
}
</style>
<table class="games">
<tr style="height:64px;">
<td class="st" style="width:72px;height:72px;padding-left:8px;padding-top:8px;">
<img src="images/ssd.png" class="mouseOver" width=64px height=64px />
<div class="secret">Secret Text!</div>
</td>
<td class="st" style="width:72px;height:72px;padding-left:8px;padding-top:8px;">
<img src="images/ssd.png" class="mouseOver" width=64px height=64px />
</td>
</tr>
<tr style="height:64px;">
<td class="st" style="width:72px;height:72px;padding-left:8px;padding-top:8px;">
<img src="images/ssd.png" class="mouseOver" width=64px height=64px />
</td>
<td class="st" style="width:72px;height:72px;padding-left:8px;padding-top:8px;">
<img src="images/ssd.png" class="mouseOver" width=64px height=64px />
</td>
</tr>
</table>
<?php
include("includes/footer.php");
?>

When you mouse over the image the whole table resized can you put something so it doesn't?