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