Hover on Elements with JavaScript

Hello. I want to scale the penguin on :hover like this:

#penguin {
  width: 100px;
}
#penguin:hover {
  transform: scale(1.04);
}
<img id="penguin" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/1707px-NewTux.svg.png">

But my problem is that I want to include the scale in JavaScript and not in CSS. I tried it with style.transform = 'scale(1.04)'; but it’s not working.

document.getElementById('penguin').style.transform = 'scale(1.04)';
#penguin {
  width: 100px;
}
<img id="penguin" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/1707px-NewTux.svg.png">

The reason I want to put it in JavaScript is because I have an image that acts as a button. The opacity is 10%. When an event occurs it becomes 100% and should then achieve the :hover effect.