Changing DIV Visibility

I want to add a caption to certain images on a website I'm building when the user moves their mouse over it, along the lines of "Click to Enlarge". The HTML code I've got is as follows:

<div class="overlay">
<a href="#"><img src="image/example-4.jpg" alt="Example Image" /></a>
<div><p>Click to enlarge image</p></div>
</div>
The DIV with the caption is set in the CSS to display:none; and I have the following JavaScript code which is supposed to change this property to block on hover:

window.onload = function(){
var overlay = document.getElementsByTagName('div');
for(var i=0; i<overlay.length; i++){
if(overlay[i].className == 'overlay') {
overlay[i].onmouseover = function() { this.getElementsByTagName('div').style.display = 'block' }
} } }

But this gives this error:

Error: this.getElementsByTagName("div").style has no properties
Any idea what I've done wrong?