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="http://photochop.removablefeast.com">
   <div class="roundimg" style="background-image:url('http://www.removablefeast.com/media/www/images/photochop_thumb.png')">
      <div class="descriptive_text">HEREIN LIES TEXT TO BE VISIBLE UPON HOVERIFICATION</div>
   </div>
</a>

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 {
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 border:2px solid #555;
 height:350px;
 width:350px;
}

.descriptive_text {
 height:100%;
 width:100%;
 vertical-align:middle;
 text-shadow:0px 0px 10px #000, 0px 0px 10px #000 !important;
 color:#fff;
 display:none;
}

.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 *