Clickable transparent png?

Question

I'm rebuilding my wordpress portfolio site. I have featured images that start as grayscale with a transparent PNG on top, and roll over into full colour with no PNG.

So after figuring out how to get the transparent PNG to sit on top of my featured image, I gave myself a pat on the back before realizing that the PNG makes the entire box unclickable.

It's cancelling out the links underneath (featured images to post)

"pointer-events:none" doesn't help either, it actually glitches the rollover effect a bit.

This is the CSS related to the image...

#png1 {width: 305px; 
height: 175px;
float: left; 
position: absolute;
    z-index: 1;
} 
#png1:hover {opacity: 0;
}

And this is the php I've got going on...

<?php if ( have_posts() ) : ?>
<?php $i = 0; ?>
<?php while ( have_posts() ) : the_post(); $i++; ?>


<div class="post_home">
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
    <a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
        <?php if (has_post_thumbnail()) : ?>
            <?php the_post_thumbnail(array(305,175)); ?>
        <?php else : ?>
            <img src="<?php bloginfo('template_url'); ?>/i/noimage.jpg" width="305" height="175" alt=""/>
        <?php endif; ?>
    </a>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
</div>


<?php if ($i % 6 == 0) echo '<div style="clear: both;"></div>'?>
<?php endwhile; ?>

Any suggestions?

EDIT:

I am by no means a web designer at all. I'm a print designer. I work in WP because I'm comfortable with CSS. I have a feeling the answer is right there in the code, staring at me, and I just have no idea what to do with it.

Any help at all would be super awesome :)

Answer 1

As I explained in my comment, you can just change the structure of the html slightly and put the img tag inside the anchor, this can be achieved by simply swapping the two lines:

<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">

becomes

<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />