Question

First you sould look at the final effect; it’s diffcult to describe. It seems perfect, but there is a little problem.

When your cursor moves close to the square’s left border in very small steps, the white shadow also trembles a lot.

How can I fix that?

Answer 1

You should add overflow: hidden on the #container div.

The #shadow div is overflowing to the left, expanding the hoverable area from its parent.

#container{
   position: relative;
   margin: 0 auto;
   width: 200px;
   height: 200px;
   overflow: hidden;
}