• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Display Entry Title Text Over Featured Image

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

title on featured image

This CSS code below displays the post title within the featured image.

Register for full access


And here’s the result when using the above code:

background color opacity

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:

remove background on hover

Another option is to use a black background like this:

font variant small caps

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.

wider 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.

no featured image uploaded

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.

Related Tutorials

  • Entry Title Overlay Featured Image in No Sidebar Pro
  • Archive Template With Featured Image Hover Overlay
  • Title Over Featured Image

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.