Positioning hover image before table

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> <a href = \"editCDForm.php?itemCode=$iCDID\">$CDTitle</a> </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/