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

Chase Lee
Chase Lee
29,275 Points
Posted by Chase Lee
Chase Lee
29,275 Points

How To Put An Image Over A Link

Hey everyone I'm trying to make a website and wanted to put an image over the link and then use a CSS transition so when you hover over it the image will pop up and show the link text.

My only problem is I don't know how to position the image over the link so that it hides the text.

Thanks in advance.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Maybe a codepen to show us your code would helpful in this case.

4 Answers

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

Hey everyone. Thanks for your replies, I got some code from off the web and it worked. But thanks again for everything!

David Moore
PLUS
David Moore
Courses Plus Student 9,524 Points
David Moore
David Moore
Courses Plus Student 9,524 Points

Perhaps use the z-index property. Also make the parent element position property relative and the child absolute.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Give the text a property of display:none and then on the text call :hover pseudo-class, display:block. That would sort out having the text appear when you hover over it.

Then it's just a case of how do you want to animate the two elements. Perhaps use jQuery and hide and show?

J.T. Gralka
J.T. Gralka
20,126 Points
J.T. Gralka
J.T. Gralka
20,126 Points

In addition to what Matthew Campbell said about using jQuery, you might consider not actually positioning the image over top of the link; you might, instead, animate the image away and then show the link. This would better ensure that the link is not revealed prematurely due to how the page is rendered by a browser; it might give you better control of the visibility of the link, and your desired show-hide functionality can be preserved.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Using slideUp to reveal the link may work well J.T. Gralka.