JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
    <a href="#">
        <div class="image_holder">
            <div class="decorations"></div>
                <img src="http://www.rap.ru/img/news/b/4491.jpg">
        </div>
    </a>
</div>

CSS

.image_holder {
    position: relative;
    width: 642px;
}

    .image_holder:hover .decorations {
        opacity: 1;
        transition: opacity .5s;
    }

.image_holder .decorations {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    background: url('http://cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-128.png') center center no-repeat;
    transition: opacity .2s;
}