在Wordpress中的精選圖像上添加文字覆蓋

我正在嘗試顯示項目列表（自定義文章類型）。看着這個標題，標籤，特色圖像和固定鏈接：在Wordpress中的精選圖像上添加文字覆蓋

 <li> 
     <div class="blog_item"> 
      <a class="full_link" href="<?php the_permalink(); ?>"></a> 
      <div class="abs_bg"><?php the_post_thumbnail(); ?></div> 
      <div class="blog_item_inner"> 
      <h3 class="post-title"><?php the_title(); ?></h3> 
      <h5><?php the_tags(' '); ?></h5> 
      </div> 
     </div> 
     </li>

想法很簡單，當你將鼠標懸停在圖片，文本顯示，你可以在任何地方點擊，查看這篇文章。

通常這將通過使用一個錨標記與其中的其他元素來完成，但由於某種原因，該方法似乎創建了2個永久鏈接並混淆了整個事情。

另一個問題是我試圖使圖像響應。我使用的是百分比寬度和高度，但除非將父元素的父元素設置爲固定高度，否則無法顯示整個圖像。

我已經在這裏創造一個測試 - https://jsfiddle.net/w54htg7g/

這裏的CSS：

.blog_item { 
     position: relative; 
     transition: all 0.5s; 
     text-align: center; 
     display: flex; 
     justify-content: center; 
     align-items: center; 
    } 
    .blog_item .abs_bg { 
     display: block; 
     z-index: 2; 
     position: absolute; 
     left: 0; 
     top: 0; 
     width: 100%; 
     height: 100%; 
     transition: all 0.5s; 
    } 
    .blog_item .blog_item_inner { 
     z-index: 1; 
     position: relative; 
     padding-top: .5em; 
     padding-bottom: .7em; 
    } 
    .blog_item .full_link { 
     z-index: 3; 
     position: absolute; 
     left: 0; 
     top: 0; 
     width: 100%; 
     height: 100%; 
    } 
    .blog_item:hover { 
     background: #000; 
    } 
    .blog_item:hover .abs_bg { 
     opacity: 0.5; 
    }

下面是它看起來像現在：