Play button overlay image using CSS

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;


  • Sponsors