在悬停时保持图像链接可点击

Question

所以我的img是可点击的，但由于我添加了一些字幕悬停效果，它不允许我点击图片/标题。我喜欢的是，即使标题显示在顶部，即将整个标题设置为可点击，img仍然可以点击。我试图锚定img或标题的方式，我仍然无法点击它。

HTML：

<div class = "post-thumb">
    <a href="<?php echo the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
    <div class = "caption">
        <h4><a href="<?php echo the_permalink(); ?>"><?php the_title(); ?></a></h4>
        <p><?php $content = get_the_content('Read more');
            print $content;?>
        </p>
    </div>
</div>

CSS：

.singlecolumnpost .post {
    float: left;
    display: block;
    padding: 5px 5px;
}

.twocolumnpost .post {
    float: left;
    display: block;
    width: 50%;
    padding: 0px 0px;
}

.singlecolumnpost img, .singlecolumnpost iframe {
    display: block;
    max-width: 940px;
    max-height: 529px;
    width: 100%;
    padding: 0;
}

.twocolumnpost img, .twocolumnpost iframe {
    max-width: 460px;
    max-height: 259px;
    width: 100%;
    padding: 0;
}

/* caption effects */

.caption {
    bottom: 0;
    opacity: 0;
    filter: alpha(opacity = 0);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.caption h4, .caption p {
    padding: 20px 10px;
}

.post-thumb:hover .caption {
    opacity: 0.75;
    filter: alpha(opacity = 75);
    transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
}

/* end caption effects */

那么正确的方法是什么，以及保持图像可点击的方法？