🤩 Access a heap of free courses with a SitePoint account

Play button overlay image using CSS

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/


    #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;