JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="container">
    <div style="margin-top: 20px;">
        <div>Font Awesome</div>
        <div class="gallery-item">
            <img src="http://lorempixel.com/200/200/" class="img-polaroid">
            <div class="play-button"><i class="icon-youtube-play"></i></div>
        </div>    
    </div>
</div>

CSS

.gallery-item{
    display: inline-block;
    position: relative;
}

.play-button{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -45px;

    color: #CC181E;
    font-size: 90px;
    opacity: 1;    
}
.gallery-item:hover .play-button{
    color: #CC181E;
    opacity: 1;
}