Positioning hover image before table - php

Question

I'm trying to place a image & hover image above my table. I was trying to play around with the css position such as absolute/relative/fixed/static. But somehow it will either appear on top of the table or push the table to the bottom of the page.
How can i place the image just above my table ?
CSS:
.searchbutton {
position: relative;
top: 10%;
left: 40%;
display: block;
width: 450px;
height: 450px;
background-image: url('<?php echo $searchpic;?>');
background-repeat:no-repeat;
}
.searchbutton:hover {
position: relative;
top: 10%;
left: 20%;
display: block;
width: 450px;
height: 450px;
background-image: url('<?php echo $searchhoverpic;?>');
background-repeat:no-repeat;
}
PHP:
<?php
include 'database_conn.php';
$sql = "SELECT tablename.ID, tablename.Title, tablename.Year, tablename2.catDesc,tablename.catID
FROM tablename
LEFT JOIN tablename2 ON tablename.catID=tablename2.catID";
$queryresult = mysqli_query($conn, $sql)
or die (mysqli_error($conn));
echo '<table cellpadding="0" cellspacing="0" class="db-table" table align="center">';
echo"<tr><th>Title</th><th>Year</th><th>Category</th> </tr>";
while($row = mysqli_fetch_assoc($queryresult)) {
$iCDID = $row['ID'];
$CDTitle = $row['Title'];
$CDYear = $row['Year'];
$CDCatID = $row['catID'];
echo "<tr><td>";
echo "<div> $CDTitle </div>\n";
echo "</td><td>";
echo $row['Year'];
echo "</TD></tr>";
}
echo "</table>";
mysqli_free_result($queryresult);
mysqli_close($conn);
?>

Answer 1

You would want to do put the table in a div container and add position:relative to it. To the image you would need a position:absolute to have it cover the table.
HTML:
<div class="outer">
<div class="image"></div>
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
CSS:
.outer {
position:relative;
}
.image {
position:absolute;
top:0;
left:0;
width:100px;
opacity:0.4;
height:100px;
background:red;
}
https://jsfiddle.net/cL12xgx6/