JSFiddle - React, Tailwind, and code Playground

HTML

<div class="the-div" id="test-1"></div>
<div class="the-div" id="test-2"></div>
<div class="the-div" id="test-3"></div>

CSS

.the-div {
    background-image: url('http://www.reilenzeilen.nl/index_bestanden/image9131.jpg');
    margin: 10px;
    width: 200px;
    height: 80px;
}

.the-div:hover {
    outline: 1px solid black;
}

#test-1:hover {
    background-color: rgba(0,0,0,0.1);
}

#test-2:hover {
    background: url('http://www.reilenzeilen.nl/index_bestanden/image9131.jpg'), rgba(0,0,0,0.1);
}

#test-3:hover {
    background: rgba(0,0,0,0.1);
}

JavaScript

/*
Note:
This image is just a placeholder.
*/