Skip to main content

Play button overlay image using CSS

By Sam Deering



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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;


  • Related Articles

    Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

    New books out now!

    Learn the basics of programming with the web's most popular language - JavaScript

    A practical guide to leading radical innovation and growth.

    Integromat Tower Ad