- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Sliding post details on mouseover on css-tricks.com front page
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.
You mean like this?
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.
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
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.