How to use hover effect on images with no background edge-to-edge?

Issue

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.

Solution

You should be using drop-shadow instead of box-shadow. CSS filter has lot more options, you can dim the image or make it brighter too.

filter: drop-shadow(16px 16px 20px red);

For the image to have a background too along with shadow, I suggest you to add background to the parent on hover. Because if you apply background on the image then the drop-shadow will be covered by it. So apply bg to parent.

Don't load another image on hover only for this effect. Depending on user's bandwidth, the user will have to wait for the second image to load as he hovers and it won't look so good, whereas with CSS transitions you can make the above mentioned fixes looks slick.

Answered By - Sandeep C. Nath