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

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

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

4 Answers

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!

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

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

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

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