Q: HTML rollover text and image appears (text is inside of a table) Hello I am designing a page and my client wants an image to appear when you hover over one of the rows in a table. We don't want the image to appear inside the table, just floating above it. I am not sure how much code I should supply here:
<div class="tg-wrap"><table id="tg-VGIE9" class="tg">
  <tr>
    <th class="tg-yw4l">Item #</th>
    <th class="tg-yw4l">Product Family</th>
    <th class="tg-yw4l">Item Description</th>
    <th class="tg-yw4l">Price</th>
  </tr>
  <tr>
    <td class="tg-yw4l">161129-1</td>
    <td class="tg-yw4l">Accessory</td>
    <td class="tg-yw4l">3010-0289FG, CI-3 CABLE ASSEMBLY</td>
    <td class="tg-yw4l">$189.94</td>
 </tr>
</table></div>

So when you rollover anything from 161129-1 to the price, the image would appear above.
Thank you for your help! 

A: Using CSS to make something appear above the thing you're hovering, since you can't traverse up the DOM in CSS and can only traverse down, you can use flexbox with order to visually re-position things while still keeping the element after the element you're hovering.
But if you're hovering over one thing, and you want something that came before that thing to be displayed on hover, javascript is probably a better solution.


* {margin:0;}
tbody {
  display: flex;
  flex-direction: column;
}
.img {
  display: none;
  order: -1;
}
tr:hover + .img, tr:hover {
  display: flex;
}
<div class="tg-wrap">
  <table id="tg-VGIE9" class="tg">
    <tbody>
    <tr>
      <th class="tg-yw4l">Item #</th>
      <th class="tg-yw4l">Product Family</th>
      <th class="tg-yw4l">Item Description</th>
      <th class="tg-yw4l">Price</th>
    </tr>
    <tr>
      <td class="tg-yw4l">161129-1</td>
      <td class="tg-yw4l">Accessory</td>
      <td class="tg-yw4l">3010-0289FG, CI-3 CABLE ASSEMBLY</td>
      <td class="tg-yw4l">$189.94</td>
    </tr>
    <tr class="img">
      <td colspan="4">
        <figure>
          <img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg">
        </figure>
      </td>
    </tr>
    <tr>
      <td class="tg-yw4l">161129-1</td>
      <td class="tg-yw4l">Accessory</td>
      <td class="tg-yw4l">3010-0289FG, CI-3 CABLE ASSEMBLY</td>
      <td class="tg-yw4l">$189.94</td>
    </tr>
    <tr class="img">
      <td colspan="4">
        <figure>
          <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
        </figure>
      </td>
    </tr>
    </tbody>
  </table>
</div>


