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 front page

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #30433

    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.


    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

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.