How to add play button overlay on website - css

Question

I've been having trouble with various play button options.
This time i copied from
codepen.io/martinkrulltott/pen/xwrXwR
My version
http://www.leatherspin.com/TEST.html

Answer 1

Check this solution added overlay play button
.video-thumbnail {
position: relative;
display: inline-block;
cursor: pointer;
margin: 30px;
}
.top-img {
position: relative;
display: inline-block;
cursor: pointer;
margin: 30px;
}
.btm-img {
position: relative;
display: inline-block;
cursor: pointer;
margin: 30px;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.7);
text-align:center;
}
.top-img:hover .overlay ,.btm-img:hover .overlay {
opacity: 1;
}
.overlay i
{
color:#fff;
top: 42%;
transform: translate(-50%,0);
position: absolute;
font-size:50px;
}
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="video-thumbnail top-img">
<img src="http://www.leatherspin.com/Girl-in-leather-gloves-with-gun-leather-jacket-overknee-leather-boots-8.jpg" alt="Video thumbnail">
<div class="overlay">
<i class="fa fa-play"></i>
</div>
</div>
<div class="video-thumbnail btm-img">
<img src="http://www.leatherspin.com/girl-with-gun-leather-gloves-leather-pants-boots-170.jpg" alt="Video thumbnail">
<div class="overlay">
<i class="fa fa-play"></i>
</div>
</div>