可点击的透明png？

Question

我正在重建我的 wordpress 投资组合网站。我的精选图片从灰度开始，顶部有透明 PNG，然后滚动到没有 PNG 的全彩。

所以在弄清楚如何让透明 PNG 放在我的特色图片上之后，我拍了拍自己的后背，然后才意识到 PNG 使整个框无法点击。

它正在取消下面的链接（要发布的特色图片）

"pointer-events:none" 也无济于事，它实际上使翻转效果有点小问题。

这是与图片相关的 CSS...

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

这就是我正在做的 php...

<?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; ?>

有什么建议吗？

编辑：

我根本不是网页设计师。我是一名印刷设计师。我在 WP 工作是因为我对 CSS 很熟悉。我有一种感觉，答案就在代码中，盯着我看，我不知道该怎么处理它。

任何帮助都会非常棒:)

Answer 1

正如我在评论中解释的那样，您可以稍微更改 html 的结构并将 img 标签放在锚点内，这可以通过简单地交换两行来实现：

<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(); ?>">

变成

<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" />