Добавление текстового наложения на изображение в Wordpress

Question

Я пытаюсь отобразить список проектов (Custom post type). Просто название, теги признаки изображений и постоянная ссылка:

 <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 постоянные ссылки и помешает всему этому.

Еще одна проблема заключается в том, что я пытаюсь сделать изображение отзывчивым. Я использую процентную ширину и высоту, но если я не сделаю родителя .blog_item элемент фиксированной высоты, я не могу получить все изображение для отображения.

Я создал тест здесь - 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; 
    } 

Вот что он выглядит сейчас:

И это, как я хочу, чтобы это выглядело :

Answer 1

Изменение position свойство .blog_item .blog_item_inner {} к position: absolute;, а не position:relative;

Это абсолютно позицию, что содержание в пределах .blog_item элемента, так как это .blog_item {} родительский элемент и был расположен относительно.

Возможно, вам потребуется уточнить CSS для .blog_item .blog_item_inner {}. Однако это должно быть шагом в правильном направлении.

Сложно быть точным и точным, если нет примера для тестирования, как ссылка jsFiddle, и имеются только фрагменты кода.