Нашел в интернете решение как наложить текст на картинку. Вот только к "Подробнее" хотел бы дописать еще php код для вывода даты.
.imgteaser { /* общий блок */
position: relative;
display: table;
margin: 0 auto;
color: rgba(255, 255, 255, 0.95);
cursor: pointer;
}
.imgteaser:after { /* "подробнее" */
content: "Подробнее";
position: absolute;
right: 0px;
left: 0px;
bottom: -6px;
padding: 5px 9px 4px 9px;
background: rgba(0, 0, 0, 0.2);
}
.imgteaser:hover:after {content: none;}
.imgteaser figcaption {display: none;}
.imgteaser:hover figcaption { /* прозрачная область */
display: block;
position: absolute;
right: 0px;
left: 0px;
bottom: -6px;
padding: 5px 9px 4px 9px;
background: rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 15px 0 rgba(255, 255, 255, 1);
box-shadow: 0 0 15px 0 rgba(255, 255, 255, 1);
}
-
<div class="miniature">
<?php if ( has_post_thumbnail()) { ?>
<figure class="imgteaser">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" > <?php the_post_thumbnail('post-thumbnail'); ?></a>
<figcaption>прозрачная область</figcaption>
</figure>
<?php } ?>
</div>