An Interesting CSS Hover Effect

I cooked up what I believe is an interesting little CSS effect which you can see on my home page.  After having a delightful time playing with text-shadows in an unconstrained environment, I wanted to see how far CSS selectors would go.

The effect reveals some descriptive text when a link is hovered, all purely CSSey.

Here's the HTML:

<a class="title_link" href="">
   <div class="roundimg" style="background-image:url('')">
      <div class="descriptive_text">HEREIN LIES TEXT TO BE VISIBLE UPON HOVERIFICATION</div>

This works without any fixed positioning because the div is empty save for the background image.  You could do a text over text overlay using the same technique with a little dash of position: fixed and some love, no doubt.

And the CSS:

.roundimg {
 border:2px solid #555;

.descriptive_text {
 text-shadow:0px 0px 10px #000, 0px 0px 10px #000 !important;

.title_link:hover .roundimg .descriptive_text {
 display:block !important;

The hoverifying magic is in that last CSS declaration.  It takes all children of the element with the class title_link that is being hovered that have the class roundimg and then takes all their children that have the class descriptive_text and flips their display attribute to block.  This is kind of how pure-CSS menus work.

This'll probably take some vicious hackery to get working in Internet Explorer 6, but plays surprisingly nicely with IE7 due in part to using the <A> element's hover pseudo-class.

1 thought on “An Interesting CSS Hover Effect”

Leave a Reply

Your email address will not be published. Required fields are marked *