quickie!

I’ve put two images up with two words and made the images links. But the text is apparently interfering with the image links and there is an area in the middle of each image where you can’t click.

http://alexrooney.com/gallery/

Why is this?
here is my html:

<div style="width: 390px; left: 250px; top: 90px; position: absolute; z-index: 0;">
<h2 style="text-align: left;">Portraits</h2>
</div>
<h2><a href="http://alexrooney.com/gallery/portraits/"><img class="size-full wp-image-223 aligncenter" title="Jon copy" src="http://alexrooney.com/wp-content/uploads/2012/09/Jon-copy.jpg" alt="" width="141" height="191" /></a></h2>
<div style="width: 390px; left: 250px; top: 290px; position: absolute; z-index: 0;">
<h2 style="text-align: left;">Objects</h2>
</div>
<h2><a href="http://alexrooney.com/gallery/objects/"><img class="alignnone size-full wp-image-224 aligncenter" title="Cup" src="http://alexrooney.com/wp-content/uploads/2012/09/Cup.jpg" alt="" width="141" height="191" /></a></h2>

[Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your code may now have been permanently damaged/corrupted by the forum’s parser.]