Skip to main content

Play button overlay image using CSS

By Sam Deering

JavaScript

Share:

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+ 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('https://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

  • 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