I am new to Javascript. I want to make my image gradually get smaller, and then resize back to its original size. What I have works, but only after hovering over the image 2 times or more.

To be clearer, when I hover my mouse over the image for the first time, it makes a very abrupt transition, but works after that. It did the same thing when using CSS instead.

What I have is this:

```
        function enlargeImage() {
        var logo = document.getElementById('logoname');
        logo.style.opacity = '0.7';
        logo.style.height = 'auto';
        logo.style.width = '800px';
        logo.style.transition = '0.7s';

    }

    function resizeImage() {
        var logo = document.getElementById('logoname');
        logo.style.opacity = '1';
        logo.style.height = 'auto';
        logo.style.width = '900px';
    }

```

Should this work? Or have I coded in a way in which I shouldn't have?