Centering Play Button Demo

by neonDog

HTML

<h3>Ex 1: Image Size Determines Size of the Parent Container</h3>
<div class ="image ex1">
    <a href="#">
        <img src="http://placehold.it/200x150" alt="video">
        <span class="play">
            <span></span>
        </span>
    </a>
</div>
    
<h3>Ex 2: Parent Container Has A Specified Width</h3>
<div class ="image ex2">
    <a href="#">
        <img src="http://placehold.it/200x150" alt="video">
        <span class="play">
            <span></span>
        </span>
    </a>
</div>
    
<h3>Ex 3: Parent Container Has Full Width and Specified Height</h3>
<div class ="image ex3">
    <a href="#">
        <img src="http://placehold.it/200x150" alt="video">
        <span class="play">
            <span></span>
        </span>
    </a>
</div>

CSS

.ex1.image {
    position: relative;
    display: inline-block;
    margin-left: 50px;
}

.ex2.image {
    position: relative;
    display: inline-block;
    width: 600px;
    height: auto;
    text-align: center;
}

.ex3.image {
    position: relative;
    display: block;
    width: auto;
    height: 200px;
    text-align: center;
}

.image a {
    display: inline-block; 
    position: relative;
}

.ex3.image a {
    margin-top: 25px;
}



/* Gets rid of the extra white space that follows an inline element*/
.image img {
    vertical-align: bottom;
}

/* Creates the play arrow motif */
.image .play {
    position:absolute;
    width:50px;
    height:50px;
    border:3px solid #fff;
    top:50%;
    right:50%;
    margin:-28px;
    border-radius:30px;
    box-shadow:1px 1px 2px rgba(0,0,0,.2);
}
.image .play span {
    position:absolute;
    width:0;
    height:0;
    border-top:12px solid transparent;
    border-bottom:12px solid transparent;
    border-left:20px solid #fff;
    top:15px;
    left:18px;
}

/* Extra style for demo */
h3 {margin-bottom: 0.50em;}
.image {
    margin-bottom: 2.00em;
    outline: 1px solid blue;
}