Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress WordPress Theme Development Custom Post Type Templates in WordPress The Portfolio Homepage

Sam Buck
Sam Buck
8,087 Points
Posted by Sam Buck
Sam Buck
8,087 Points

How can I add the respective post titles on top of the portfolio images that we are pulling?

Many Wordpress sites display the images along with the title on top of their image. I've seen this most commonly within post sliders.

How do I go about getting the post title on top of the post's image.

Bonus - is there a way to do that only upon hover?

2 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Using the project example, the following code will load the_title() into a span after the linked image.

To display the title on hover requires CSS. I created an example on Codepen of this effect. You may want to create some custom classes for the div and title span for specificity.

<div class="small-5 medium-4 large-3 grid-item">
  <a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post_id, $size=0, $attr ); ?></a>
  <span><?php the_title(); ?></span>
</div>
Sam Buck
Sam Buck
8,087 Points
Sam Buck
Sam Buck
8,087 Points

Thank you! The example on Codepen was fantastic.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

One way is you could have a div as a grid item, and give that div a background image of whatever image. Than add the title inside that div with the the_title(); tag. Probably want to absolute position the title (make sure it's parent div with the picture on it has a position: relative attribute, and than you can move the title with top, right, bottom, and left relative to it's parent div.

For hover, simply set the title to display: none; and than when you hover the div that contains the title, set it to something like div:hover { display: block;} or something like that and you should get the title on hover.

I would probably look at using Wordpress's featured image function to add the image with post title overlay.

Sam Buck
Sam Buck
8,087 Points
Sam Buck
Sam Buck
8,087 Points

Super helpful. Thank you so much.