If you want to remove your titles from displaying above or below your featured images on any type of archive page, you should find this post interesting.
We’ll look at displaying your posts entry titles within your images using CSS code.
You can display them permanently on your images or only when hovered.
This code works well if you have:
- Created a custom post type grid style archive for a portfolio or any other CPT.
- Modified your category and/or other archive pages to display in a grid style layout with columns.
Here’s an example:
Display Archive Entry Titles In Images
This CSS code below displays the post title within the featured image.
And here’s the result when using the above code:
Looks good and long titles will align center as well as retain exactly the same padding for top, bottom, left and right of your titles.
When hovered the background becomes transparent:
Another option is to use a black background like this:
This is probably the safest option as your images will probably be different colors therefore the white font on black background will always be clear and easy to read.
Things To Look Out For
You will need to make sure all your posts include a featured image which is exactly the same width or you’ll see some potential issues like this when using a different sized post thumbnail.
The above problem occurs because the CSS includes a width for the background color and only works when images are the same width as the value in the code.
Another problem can occur if some posts don’t include images however you can easily solve this by installing a plugin or adding code which displays a default thumbnail when one is not manually added.
Usage on Other Pages
Simply change the archive class to .page-template-page_blog-php for usage on your blog page.
Change .archive to .home for your home page and .archive to your custom post types custom class for any CPT archive templates.
Leave a Reply
You must be logged in to post a comment.