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

General Discussion

Posted by Dennis Castillo
Dennis Castillo
16,018 Points

Need help about text hover on image...

Need help. I don't know where to start, can you give a basic idea about my problem.

PROBLEM: I have an image, once i put my mouse on it, it will appear a text description [hover] that I can read or click on it. and once I take it out the mouse from the image, the text will be fade away or drop down. How do you do this?

Thanks and God Bless

3 Answers

Donald McLamb
Donald McLamb
2,867 Points
Donald McLamb
Donald McLamb
2,867 Points

Hi Dennis,

I would recommend the following:

<a href ="img/test.jpg">  <img src ="img/test.jpg"   title="Click Here Friend"> 

</a>

Anything else, a slow fade on mouse off, I would suggest looking in to javascript.

Dennis Castillo
Dennis Castillo
16,018 Points

So inside of this code "a" it's a text and write a script to hover it?

Donald McLamb
Donald McLamb
2,867 Points
Donald McLamb
Donald McLamb
2,867 Points

Hi Dennis,

In the line of code above it is the title attribute:

title=" "

that allows the pop up text when hovering

Try that option, if you don't like it I would look to javascript

Jeremy Frimond
Jeremy Frimond
14,470 Points
Jeremy Frimond
Jeremy Frimond
14,470 Points

You could always change the title to alt and keep that desired text. The text wont pop up when hovering and will still index the image on search engines and be helpful with SEO