JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<a href="/">
    <div class="play"></div>
    <img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
    <br />
    <b>Video test</b>
</a>

CSS

a {
    display: inline-block;
    overflow: hidden;
    position: relative;
}
.play {
	background:url(http://placehold.it/80x80) no-repeat center center;
    opacity: 0;
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -55px;
    transition: opacity 0.3s;
}
a:hover .play {
	opacity: 0.7;
}