JavaScript - - By Sam Deering

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

  • Sponsors
    Login or Create Account to Comment
    Login Create Account