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 trialSam Buck
8,087 PointsHow 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
28,690 PointsUsing 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>
Kevin Korte
28,149 PointsOne 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
8,087 PointsSuper helpful. Thank you so much.
Sam Buck
8,087 PointsSam Buck
8,087 PointsThank you! The example on Codepen was fantastic.