JS - Show Hide Element using Click and Mouseout

HTML

<h3 id="message">Click Me </h3>

<!-- small thumbnail image that we click -->
<img id="clickMe" src="http://placekitten.com/150/150">
<!-- hidden image that we show -->
<img id="showMe" src="http://placekitten.com/250/250">

CSS

#message {
    font-size: 20px;
    position: absolute;
    z-index: 100;
    background: yellow;
}
img {
    position: absolute;
    top: 0;
    left: 0;
}
img:hover {
    cursor: pointer;
}
#clickMe {
    top: 50px;
}
#showMe {
    display: none;
}

JavaScript

//get a reference to the two image elements on the page
var clickMe = document.getElementById('clickMe');
var showMe = document.getElementById('showMe');
var message = document.getElementById('message');


//create a function for displaying the hidden image
var onClick = function () {

    showMe.style.display = 'block';
    message.innerHTML = "mouse off of me!"
};

var onMouseOut = function () {

    showMe.style.display = 'none';
    message.innerHTML = "Show Puss"
};


//add event listeners to detect the click and mouseoff

clickMe.addEventListener('click', onClick);

showMe.addEventListener('mouseout', onMouseOut);