SOURCE

<div>
    <img class="play" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAA3lBMVEUAAAD/ZwD/gQD/bgD/eAD/iwD/fQD/dAD/hQD/awD/cQD/ewH/hwD/iAD/jgD/hwD/fgD//v3/kQD/dwD/aQD/dwD/dwD/awD/iQD/aAD/jAD/ZwD/bAD/iwD/aAD/hgD/aQD/jwD/awD/8OT/7d3/1LD/w5D/wIT/p1r/oUr/kTH/jR3/hQ7/bwD/ZwD/ZwD/jQD/hgD/kQD/ZwD/kQD/ZwD/jwD/kQD/fgD/cgD/ZwD/kwD/gAD/+fX/+PP/9+//59L/38T/z6L/smz/oUX/gAD/fgD/gwD/gQD////4hG+/AAAASXRSTlMAzMzMzMzMzMzMzMzMzMwJzP7Fw8GumYyEhFxcQjs7KCgZGfj37Obj29jU0M7GxsPAwK6umZmMfX19fUJC/Pv69PHp3tfGxoyMsWZZPgAAAVpJREFUOMuNlOl2gjAQhRMgqKAguEGLtnXfaje1+77y/i9U0lAmmeb0eH9/595MMjdEkp9ct1uNRqt9decTnQ47x6ZTKlmWZdv2x9fBH6AfV0wzQzjj2rZhGNGRSvSaFCPls65M7FPKEYcHFUi5tocIjoALZ6rA9CjVulQZy7P6zRyBs9QFUmOn4swxBQQFMRb93AelEIRdmMfvpwOIORrMkAvbEuKvcoIjQRqMXQXxQp8kVHJJMz3NFcS7JTcYSe9fxdA5ckk2EuKkQqOlcGEcWZML1UVo8CZcOHNOTpCLUDArgkJAwIVrUhw31AelwwVH8qCNDnlZwkRrGBrO8jhVh05+iQJ5XqCr81eqSzCR9iVT6KvP+JAO5+ilt+oymNOxCy8Ny0Di//Yl0i0muIjFhPWu5IilIF25JFSD4CJBEFQNFxZXDQqLam9B7XWfR9HG+vsnfB47fEHflFU44X1DIqkAAAAASUVORK5CYII=" alt="" class="play">
    <img class="bg" src="https://r1.ykimg.com/050C00005ED1D0F21B6A8D6B120D2242" alt="">
</div>

div {
    position: relative;
    margin: 0 auto;
    width: 444px;
    height: 320px;
}
div .bg {
    width: 100%;
    height: 100%;
}
div::after {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
}
div .play {
    position: absolute;
    display: none;
    z-index: 1;
    left: calc(50% - (34px / 2));
    top: calc(50% - (34px / 2));
}
div:hover .play,
div:hover::after {
    display: block;
}