CSS hover effects

HTML & CSS
1

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:

2

Load up firebug in Firefox and take a look.

Itā€™s just a CSS rollover.

3

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?

4

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ā€.

5

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

Just run a quick test with this codes

HTML

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

CSS

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:

6

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