Dear Monica,
The code is working perfectly here.
"on-click" won't hide your image when the page is opened. The image will load like other elements. The only change would be, animation will be applied when you click on the image. And that is happening perfectly on all the browsers I checked (Chrome, Safari, Firefox and IE).
Just on a side note, even if you manage to hide the image by, lets say using opacity: 0; or something similar, how would the users know that they have to click on an empty space to reveal the image? And this is the reason why we didn't find it logical to have this function.
Please let me know if you have any more queries regarding the issue.