By Sam Deering

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+

    Previous Attempts

    Attempt – works, not so good in FF Attempt – works, good in Chrome, FF, IE9



    #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('') center center no-repeat;
        margin: -240px 10px 0 0;
        height: 140px;
        position: relative;
        z-index: 10;


    • 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…

      • 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

    • Mark

      Not working IE7 :(

    • Thank You very much

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