JSFiddle - React, Tailwind, and code Playground

HTML

<a style="background-image: url(http://www.aorbita.ru/images/111.jpg);" class="preview-image"><i class="g-icon g-icon-play"></i></a>

CSS

.preview-image {
    background-clip: padding-box;
    background-position: 50% 51%;
    background-repeat: no-repeat;
    background-size: 120% auto;
    border-radius: 6px 6px 0 0;
    display: block;
    height: 155px;
    vertical-align: top;
		position:relative;
}

.g-icon-play {
    background: url("http://www.aorbita.ru/images/btn_play.png") no-repeat scroll 0 0 transparent;
    height: 58px;
    left: 50%;
    margin: -29px 0 0 -29px;
    opacity: 0;
		transition: opacity 0.2s linear 0s;
    top: 50%;
    
    width: 58px;
    z-index: 2;
		position: absolute;
}

.preview-image:hover .g-icon-play {
	opacity:1;
	transition: opacity 0.2s linear 0s;
}