在图像悬停上显示文字（图像内联）

Question

以下是我codepen的链接。

我希望文本在图像上垂直和水平居中。除非您将鼠标悬停在图像上，否则我还希望文本不可见。我认为这是最困难的部分，但我还没有达到那么远。

我知道它显然不起作用，但它是我能找到的最接近我正在寻找的布局。有什么建议？将h3和img包含在div中可能吗？

HTML：

<div class="blog-posts">

<h3>Post 1</h3>
<img class="attachment-post-thumbnail" src="http://media3.s-nbcnews.com/j/newscms/2015_50/1312506/151122-donald-trump-smiling-956a_6d624dc0061bbd1233cc33461649ea73.nbcnews-fp-1200-800.jpg" />


<h3>Post 2</h3>
<img class="attachment-post-thumbnail" src="http://media3.s-nbcnews.com/j/newscms/2015_50/1312506/151122-donald-trump-smiling-956a_6d624dc0061bbd1233cc33461649ea73.nbcnews-fp-1200-800.jpg" />

</div>

CSS：

.blog-posts h3 {
    text-align: center;
    top: 50%;
    left: 50%;
    color: red;
    position: absolute;
    transform: translate(-50%,-50%);
}

.attachment-post-thumbnail {
    display: inline-block;
    width: 33.3%;
    height: auto;
}

.attachment-post-thumbnail:hover {
   -webkit-filter: blur(1px);
    opacity: 0.8;
}