CSS hover effects

Hello everyone,

Just come across this site - http://workawesome.com and i just fall in love with the hover effect of featured post (the top three posts).

Anyone have a clue how to produce this kind of effect?

Thanks :smiley:

Load up firebug in Firefox and take a look.

It’s just a CSS rollover.

Already tried but no luck

      #featured-posts span.image-roll em {
        display: none;
      #featured-posts span:hover.image-roll em {
        background: url(images/sprite.png) no-repeat -50px -50px;
        display: block;
        height: 49px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 49px;

Is this use jquery? because if an element set to hidden then how come we’re going able to hover it?

No. It’s just HTML and CSS.

The key is the :hover pseudo-class. And the other trick is the way in which CSS selectors are employed.

Notice that when the span element is hovered, that the display element for the em is set to “block”.

Thanks for your explanation. Sorry coz I’m noob in HTML and CSS :stuck_out_tongue:

Just run a quick test with this codes


<span><em> </em></span>


span { display: block; position: relative; background: #dedede; height: 200px; width: 200px; }
span em { display: none; }
span:hover em { display: block; position: absolute; height: 30px; width: 30px; bottom: 0px; right: 0px; background: url(…/images/imej.png) no-repeat; }

and it works perfectly!

Thanks Force Flow (I don’t know your real name) :stuck_out_tongue:

Just be aware that you don’t want to use display: none/block when hiding/showing elements containing text. Some popular screen readers will indeed not announce something set to visibility:hidden or display: none.

Instead, if there’s text involved, keep the absolute positioning but then pull the item to be hidden off-screen to the left with either a negative left margin or a negative “left” value (IE seems like like margins better). Then let it come back onscreen with left: 0 or margin-left: something onscreen (positive number).