Sliding post details on mouseover on css-tricks.com front page

[sdavidhazi]

I’m looking for a tutorial or a snippet for the sliding effect of the front page posts’ details. I’m sure it has been asked many times, I didn’t find it with the search tool. I’m also interested in changing it to a fade-in effect instead of a slide-in.

[Damion]

You mean like this?

http://dl.dropbox.com/u/10548536/fadin.html

[sdavidhazi]

Thanks, that’s very nice, I can get started on that. I don’t see a way to reward good posts here though. :(

By the way, did you manage to find the code that provides the sliding function on the front page? I’ve been looking for something similar to your example, but I can’t find that part. I’m using Chrome’s element inspector.

[Bob]

Chris seems to use the hover pseudo class to have them ‘slide’ on hover. The background image slides using background-position and the text is first hidden using overflow: hidden and then also moved into sight using some sort of positioning it seems. I’m sure Chris can explain better though

[Chris Coyier]

It’s just a div with a couple of spans in it. The div has overflow hidden. The spans are moved outside with left/right positioning accordingly. Then on :hover, the left/right positions are set to zero so they move back inside. The animation is CSS3 through a transition. The star moves via the same transition, only, as Bob said, the background-position changes.

Sorry if that’s overly brief but that’s the rub.

[Author]

Posts