JavaScript
Article

Play button overlay image using CSS

By Sam Deering

Attempts at overlaying a play button image over another image using CSS so that it is positioned centrally to the parent image.

  • play-button-overlay

    Best Version

    Attempt – works great in modern browsers and IE8+ jsfiddle.net/SdsJ9/1/

    Previous Attempts

    Attempt – works, not so good in FF jsfiddle.net/YAuKb/1/ Attempt – works, good in Chrome, FF, IE9 jsfiddle.net/YAuKb/6/

    CSS

    #container {
        position: relative;
        display: inline-block;
        border: 1px solid green;
    }
    #container * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #image {
        z-index: 9;
        text-align: center;
        border: 1px solid blue;
    }
    #play {
        background: url('http://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat;
        margin: -240px 10px 0 0;
        height: 140px;
        position: relative;
        z-index: 10;
    }

    HTML

    • http://jquery4u.com/ jQuery4u

      Very nice mate, works well IE8+.

    • Francisco

      What can I do to make the play image have the same hyperlink than the image bellow? When I try to click over the play button, nothing happens, but, when I take it out, over the image bellow, it works…

      • http://jquery4u.com/ jQuery4u

        I assume you can attach an event handler for the click on the play image then direct it to the same action as the image click event? If your struggling can you post a your code in a jsfiddle.net?

    • Mark

      Not working IE7 :(

    • http://www.golipta.com Ahmad Nawaz

      Thank You very much

    Recommended
    Sponsors
    Because We Like You
    Free Ebooks!

    Grab SitePoint's top 10 web dev and design ebooks, completely free!

    Get the latest in JavaScript, once a week, for free.