Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,060 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

Thank you! This example really helped me!

Steven Parker
Steven Parker
220,425 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

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
220,425 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

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
220,425 Points

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