.infobox:hover .more { display: block; }

Aditya Mukherjee said on March 27, 2008

@Jeena: Because your first and second declarations clash. You are trying to hide '.infobox > div' on hover, and showing '.infobox > .more' on hover ... which both point to the same thing. It could work, but might behave erratically on different browsers.

@Jonathan: It will be better not to use the 'position' attribute, but rather put the existing content in a DIV and hide it, while showing the '.more' content - something like what Jeena initially suggests.

Also, this is not so much of an overlay, as it is extending. Overlay would be to show something on top of an existing info (with transparencies) to give a sense of layers.

Ludwig said on March 27, 2008

Jeena: That wouldn't replace the old text with the new.

Aron said on March 27, 2008

Adriaan; Instead of using display: none; you could just set a large negative value on a left value:

.infobox .more {position:absolute; left: -900em; }
.infobox:hover .more {display: block; left: -1px; ...}

Just a thought.

Fouad Masoud said on March 27, 2008

check this out.

snook for IE6 you can simple use the csshover.htc

Abhimanyu said on March 27, 2008

Nice, but for some reason it doesnt work in IE.

Ed Eliot said on March 27, 2008

One problem this approach seems to have is with keyboard focus. There is no way to expose the content without a mouse.

My feeling is that this functionality might best be implemented with JS. With JS disabled the additional content would be default displayed. With JS enabled it would be hidden (preferably off screen rather than with display: none so it's still accessible to screen readers) and displayed on rollover.

Jonathan Snook said on March 27, 2008

@Jeena: I had a feeling somebody would mention that. I had even written a paragraph but deleted it. Guess I should've kept it in. :) What I would have said was, "This example isn't the best because it could be done by simply hiding the current text while showing the new text. It's the principle that I'm trying to demonstrate, not the example I'm trying to solve."

@Ed Eliot: the accessibility issue here could be partially resolved by setting a tabindex on the div and setting up a :focus event (I believe that would work). But a nice javascript fade-in would be nice, too. :) but the CSS could still remain the same (which is really the point of this post).

Neal G said on March 27, 2008

You gotta love it when you can solve a problem with CSS that would require some convoluted javascript to create it otherwise, although that makes you wonder if behavior should be part of CSS rather than only javascript.

keif said on March 27, 2008

instead of doing two divs, what about extending the height? i.e. height of 150px with overflow:hidden, and on hover it we have it extended to a height of 200px (or 300, or whatever). (Ignoring the IE implications, at least)

Just a curious thought...

Jeena Paradies said on March 27, 2008

@Aditya: No you are wrong, if works because of the specificity. (See the great CSS Specificity Wars)

@Ludwig: Yes it would, try it yourselve.

@Jonathan: Ok I didn't get that, thanks for clearing things up.

Jonathan Snook said on March 27, 2008

@keif: the problem is displaying an overlay while retaining content from the original container. The look and feel of the overlay in this case could be completely different. Here's another example to help demonstrate the idea (and would be harder to replicate with any other idea presented here so far).

Aditya Mukherjee said on March 27, 2008

@Jeena: I missed the first <div> that holds the un-extended content. My comment was a royal waste :P

david said on March 28, 2008

very cool... it's got me thinking where it could be used.

andrej said on March 29, 2008

Great tip. Is there any restriction which html-elements you can apply the :hover attribute(?) to? Does work for lists, etc.?

Jonathan Snook said on March 29, 2008

@andrej: technically, the :hover selector works on any element. As mentioned before, IE6 is the lone exception which doesn't support it on any element BUT the <A> element.

Andrew Kumar said on March 30, 2008

no hover state in iPhone or wii

George said on March 30, 2008

How about... Change the parent DIV to an A, change the child DIVs to SPANs. Then add the following to .infobox:

text-decoration:none; //remove link underline
color:#000; //reset to the correct text color

Then add:

.infobox span {
.infobox:hover {
	zoom:100%; //force IE6 to redraw upon hover correctly

You'd have to add an href attribute to the A element for this to work, though. Just make it href="#" or href="javascript:return false", or maybe you'd actually like it to link somewhere!

Anyways, this works (I tested it in IE6 & FF2; don't see any reason it won't work in IE7, Safari 3.1 and Opera) and thus you can run a fully IE6-compatible CSS-only solution to this problem.

With IE6 still reigning supreme globally at around 40% of market share, we still have to focus on solutions that work efficiently for this abortion of a browser.

Mr.Blue said on March 31, 2008

Hi Snook, I have been using these kinds of concept to apply on the new lay-out of 9tutorials.com. Actually, I use jQuery to play around with CSS, then it could prevent the cross browser problem.

Using CSS is a great idea, but it is in short of some visual effect, which we can implement from some popular Javascript framework

Bjarni said on April 01, 2008

Interesting, I like the idea behind it.

Jermayn said on April 01, 2008

I love it!!
I like seeing examples were css can be used instead of JavaScript all the time.

btw the first example is much nicer than the second example.

RubyShooZ said on April 06, 2008

Unless I missed it - this does work in IE7.

Peace, love and understanding to all.

Google said on October 28, 2008

<img src="http://google.com/google.jpg" onClick="alert('Google');">

justin brock said on January 16, 2009

I get error pages when I click the links your examples. Have they moved?

Vi said on March 24, 2011

hi im using joomla/virtuamart, i've used this approach to our products, but i need a little help here. how can I have two overlay? options are right or left depends on the position of the product so it would look good with the site. tnx! hope to hear from you soon :)

Anita said on March 27, 2011

Tx for your informative blog. Not finding what I want, I would have to settle for the next best thing.

I am looking for position the text within the image, when hovering. like Adriaan Nel, I've seen on a site and searching for days to find similar. Ideally, image is still shown but maybe with some opacity but the white text is over the image. Thus info on image is shown within that image real estate and not to intrude on other image.

I am not strong on front end design and kicking myself for not saving that site. Save the directory site and did not realized the article was in a blog that changes. One month later when I needed the information could not recall the blog for that directory is over 400 links on web development. tx

I have look thru jslib and various site. Would take a shot with what I gather and hope to do. tx

Anita said on March 28, 2011

Found it and disappointed when tested on IE, did not want the degraded method for ie even thou it shows the description. Will look at this blog method since it can handle large description.

LO, the second best thing becomes the first. Would be nice if the java script is provided as a learning material even thou the author is for non-java script css. It is made clear he favors non-javascript design but it needs java for ie6. Tx for mentioning Dean Edwards.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.