JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="Grid">
    <li class="mix category_1 mix_all">
        <img src="http://i.imgur.com/J4PaouI.jpg" alt="#" />
        <div class="overlay"></div>
    </li>
</ul>

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mix_all {
    position: relative;
}

.mix_all .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mix_all:hover .overlay {
    background: url(http://i.imgur.com/0lu7dWs.png) no-repeat center !important;
    background-color: #de6573 !important;
    z-index: 99999999;
}

#Grid .mix {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
}

.mix.mix_all img {
    max-height: 200px;
    max-width: 200px;
}