Grow your CSS skills. Land your dream job.

Play Button Hover

  • # March 17, 2010 at 10:20 pm

    I wanted to know what would be the best way to achieve this.

    Say I’ve got a thumbnail that links to a video, when you hover over this thumbnail a play button appears over it. I thought it might be best to have a thumbnail <img> with a play button background-image as it’s hover state though now I’m thinking otherwise.

    I’m really new to this, could anyone offer up the best solution?

    # March 18, 2010 at 8:08 am

    Morning, you could use a sprite http://www.visibilityinherit.com/code/buttons.php

    # March 18, 2010 at 11:42 am

    Thanks but it’s not what I’m looking for exactly. I wanted to know if I can overlay an image over the image element. Is this possible and if not how do people like Apple create this: http://trailers.apple.com/trailers/disney/tronlegacy/

    Here’s an example of what I’d like to achive:
    [attachment=1]nohover.jpg[/attachment]
    [attachment=0]hoveron.jpg[/attachment]

    # March 18, 2010 at 11:51 am

    Apple does it the exact way I showed. Alternatively you could wrap it all In a div and position the play button there on hover.

    # March 18, 2010 at 12:17 pm

    Sorry I can’t seem to understand it. How would I implement this?

    # March 18, 2010 at 12:36 pm

    All the code needed is in the link I gave. Simply view source code and copy/paste.

    # March 18, 2010 at 12:42 pm

    I’ve copied and pasted the code and while the play button hover works I would like to know how to make it appear over an <img> element. Has this got anything to do with the z-index?

    # March 18, 2010 at 1:00 pm

    Ok img then. Wrap both img in a div with position relative. Give the play button class of play. Position .play absolute with a -999em left margin. On div hover say… div:hover .play {left:50px;top:50px}

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".