I am trying to make desk setup in css where if you hover over an image it will the background glow will change. I have used an image with no background like this:

And this is code I have written:

.parent {
  height: 700px;
  width: 100%;
  box-shadow: 20px 20px 50px 10px black;
  position: relative;
}

.Table {
  position: absolute;
  top: 30%;
  left: 30%;
  margin: -35px 0 0 -35px;
}

.Table:hover {
  color: rgba(255, 255, 255, 1);
  box-shadow: 0 5px 15px rgb(255, 154, 3);
}

js

import "./App.css";
import table from "./img/desk-removebg-preview.png";
import laptopStand from "./img/laptop_stand-removebg-preview.png";

function App() {
  return (
    <div>
      <div class="parent">
        <img class="Table" src={table} alt="Desk" />
      </div>
    </div>
  );
}

This is how this looks on hovering

Since this table image has no background shouldn't the background colour around table edge to edge change? Why is it changing background glow of the image div? How can I achieve this?

Just to show this image has no background here is a screenshot from vs code.