Results 1 to 4 of 4
Thread: css hover question
Nov 7, 2007, 07:48 #1
css hover question
Firstly let me tell you that i don't do design, i just have to make a correction..
So ive got some pics one next to another which in fact are links.
I'd like when the user puts the cursor over a pic, a text to appear underneath it.
hover or something???
thank you all.
Nov 7, 2007, 08:24 #2
- Join Date
- Aug 2007
- 51 Post(s)
- 2 Thread(s)
There are a couple of ways I guess. One is to "normally" have the text already under the links/images, but hidden by being the same colour as the background. On hover, the text colour could change to something visible. The text would actually have to be in the link though (but under the picture), and if there's other stuff under the links/images, then the text would take up space.
Another way is, with the text still actually part of the link/image, with css, the default for the text is visibility:hidden, and on hover it's visibility:visible. The text will still take up space.
Another way is to use Mike Cherim's pop-map trick. It's cute. The text doesn't appear or take up any space until the user hovers on the link/image, AND the text isn't part of the link/image either-- it's in a seperate box. http://mikecherim.com/experiments/css_map_pop.php
But giving you a more specific answer would probably mean looking at both your page and the code, since some solutions are better than other depending on the circumstances.
And the Crusty Old Guys Who Know Stuff here probably can give you three more ways to do this too : )
Nov 7, 2007, 08:28 #3
thanks stomme i'll check it out!
Nov 7, 2007, 09:29 #4
- Join Date
- May 2006
- Aurora, Illinois
- 0 Post(s)
- 0 Thread(s)
Yeah, as Stomme said, it's a disjointed CSS rollover. And I think you were given one of the better examples of it too, so I won't bug you with how I'd do it.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns