Hi Freddie,
so first off we need to create a wrapper around the article post image and the entry header.
Done this in Elements. Creating 2 hooks.
Hook 1 Blog Article Wrap Open:
<div class="article-wrap">
Hook – Before Content.
Location – Blog, you need to add All archives and Search Results.
Hook 2 Blog Article Wrap Closed:
</div>
Hook – After Entry header.
Locations same as the above. I only added to Blog.
Now we can absolute position the Entry header in this new container which the post image also occupies – i have added the additional classes for archive and search results -just need to update your hooks.
.archive .article-wrap, .blog .article-wrap, .search-results .article-wrap {
position: relative;
}
.archive .entry-header, .blog .entry-header, .search-results .entry-header {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}