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

CSS

Alita Edmonds
Alita Edmonds
6,068 Points
Posted by Alita Edmonds
Alita Edmonds
6,068 Points

How can I place text over an image?

I am wondering how I can make a text appear over an image. And also if that image is a link, that the text can also be a link too. Is there a way to do this? Thanks in advance!

4 Answers

Sam Gord
Sam Gord
14,084 Points
Sam Gord
Sam Gord
14,084 Points

Hi, although i can see Steven explained it to you clearly i wanted to add an example of what you want so you can examine how its done. it is all about positioning. and the trick is hidden inside position: relative and position: absolute; and the rule is : give the parent a position of relative and a position of absolute to the child. so the child can be controlled and placed where ever we want! :D

check this pen i made for you , keep an eye on positioning, nothing else in the code matters that much , keep commenting out the lines of code until you find how it's done , its ez ;)

https://codepen.io/simonestic/pen/jveJME

Alita Edmonds
Alita Edmonds
6,068 Points
Alita Edmonds
Alita Edmonds
6,068 Points

Thank you! This example really helped me!

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

The "position" attribute will allow you to place one element over (in front of) another.

And if you put them both inside the anchor element ("a"), and make it be a link by giving it an "href" attribute, then clicking on anything within it should activate the link.

Alita Edmonds
Alita Edmonds
6,068 Points
Alita Edmonds
Alita Edmonds
6,068 Points

Thank you all! After setting the a to "position: relative" and the <p> to "position: absolute", it is over the image but on the left side at the edge. Kind of like when you don't set a h1 to text-align: center. How can I make the text appear in the center of the image? Thanks!

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

In that great example Sam made for you, you can see these two properties added to the "h2" rule:

  left: 50%;
  transform: translateX(-50%);

Together, they place the element directly in the horizontal center.

Alita Edmonds
Alita Edmonds
6,068 Points
Alita Edmonds
Alita Edmonds
6,068 Points

Thank you everyone so much. However, the third image text appears on top of the second image, hiding the second image text. How can I fix this? Thanks

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

This probably should be moved to a fresh question. Be sure to include your code, preferably as a link to a workspace snapshot.