CSS: Reduce element size on hover, but keep original "hover area"

I want to reduce element size a bit as an effect, when it is hovered over with a mouse. However, this looks buggy because as the element reduces in size, the "hover area" gets smaller as well, which can result into the element not being hovered anymore, which further results into this "size flickering".

Is there a proper way to implement element size reduction on hover, while keeping the hover area size the same? Without extra elements?

Here is a fiddle: https://jsfiddle.net/ahvonenj/88f5by59/

Required code for fiddle linking:

#di
{
  position: absolute;
  left: 15px;
  top: 15px;
  background-color: #2980b9;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
}

#di:hover
{
  width: 50px;
  height: 50px;
  transition: all 200ms linear;
}