JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="screenshots">
    <li>
        <img src="http://img.youtube.com/vi/2ZH_FrlbN-Y/0.jpg" />
        <a href="#youtube-link" class="play"></a>
    </li>
</ul>

CSS

.screenshots li {
    background: url('http://ryan2.www.myedu.office/js/application/front-page-v3/slide/overlay-screenshot.png');
    float: left;
    height: 118px;
    margin-right: 30px;
    padding: 14px;
    position: relative;
    width: 160px;
}

.screenshots img {
    width: 160px;
    height: 118px
}

.screenshots .play {
    background: #5A6772 url('http://img43.imageshack.us/img43/4660/playbuttonx.png');
    background: url('http://img43.imageshack.us/img43/4660/playbuttonx.png') no-repeat 19px center, -moz-linear-gradient(#5A6772, #424C54);
    background: url('http://img43.imageshack.us/img43/4660/playbuttonx.png') no-repeat 19px center, -webkit-gradient(linear, center top, center bottom, from(#5A6772), to(#424C54));
    cursor: pointer;
    opacity: .9;
    padding: 30px;
    position: absolute;
    top: 44px;
    left: 65px;
    
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    
    -moz-transform: scale(.7);
    -webkit-transform: translate3d(0,0,0) rotate(0) scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
    
    -moz-transition: -moz-transform 0.2s ease-in-out;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -ms-transition: -ms-transition 0.2s ease-in-out;
    transition: transition 0.2s ease-in-out;
}

.screenshots li:hover .play {  
    opacity: 1;
    
    -moz-transform: scale(1);
    -webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
    -ms-transform: scale(1);
    transform: scale(1);   
}

.screenshots .play:active {
    background: #424C54 url('http://img43.imageshack.us/img43/4660/playbuttonx.png') no-repeat 19px center;
}