JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>

CSS

.wrapper{
  width:200px; /*switch to 200px; to see that the error is gone, switch to 200.3px to see it again*/
  height:200px; /* switch to 200px; to see that the error is gone,switch to 200.3px to see it again*/
  transform: scale(2); /*set scale to 20*/
  background-color:blue;
  position:relative;
  transition:0.01s;

}

.bg{
      transition:0.01s;

      width:20px;
    height:20px;
  display: inline-block;	
  position:absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
     background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: scale(0.5); /* set scale to 0.05 */
}

.scale20{
  transform:scale(20);
}
.scale005{
  transform:scale(0.05);
}

JavaScript

var wrapper = document.getElementById("wrapper");
var bg = document.getElementById("bg");

bg.addEventListener("mouseover",function(){
	wrapper.classList.add("scale20");
	bg.classList.add("scale005");
});

bg.addEventListener("mouseout",function(){
	wrapper.classList.remove("scale20");
	bg.classList.remove("scale005");
});