How can I make a blank area clickable to reveal text?

Question

I have been racking my brain over this for hours and scoured the net with no solutions. I have a particular area of an image that I want, when the user rolls over it, to have some text to appear where the user rolled over.

I may be going about this all wrong, I don't know. I currently have a large image with five image mapped hot spots on it. In each spot, when a user rolls over the area, I want text related to what that area is to appear over the hot spot. At that point, the hot spot and text should be clickable to take the user to a specific page.

I have tried having the text hidden, then to appear when rolled over. But you can't roll over hidden text. I have tried to remedy that by allowing the div to be rolled over and the text appear at that point, but I couldn't get that to work either. I would like a CSS solution, but I'm not against using JQuery or JavaScript. Thanks for any help that can be given.

Update - I have the script working now. Thanks CuriousSloth for what you put up on JSFiddle. It took me a little while to incorporate it into what I had, but it worked. Anyone can go and view what I was talking about on the homepage of my Portfolio site: http://www.taranwilson.com

Thanks again for all the help guys.

Answer 1

CSS

.area {
   opacity: 0;
}

.area:hover {
   opacity: 1;
   transition: opacity 0.5s ease-in-out;
}

Without JS: http://jsfiddle.net/pAmm4/1/

If you need a particular area to be clickable, not hover, you can use either JavaScript or :active pseudo-class in CSS.

Answer 2

Ideally you have different hotspot divs of a certain class and different ids. When you hover over the hotSpot class, keep track of what id you hovered over and then reveal a div corresponding to that id. That div contains your clickable element.

Here's a live code sample of how you might do this--> https://sudonow.com/session/525cb5dc35e089113700000d . I'm available over chat/live code editing to walk you through it.