JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img-wrapper"><img src="http://www.bettingexpert.com/assets/images/system/users/avatar-user.png" alt=""></div>

CSS

.img-wrapper {
    display: inline-block;
    position: relative;
}
.img-wrapper:before {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    background: rgba(0, 0, 255, 0.5);
}
.img-wrapper:hover:before {
    content: '';
}
    .img-wrapper > img {
        display: block;
        position: relative;
        z-index: 1;
    }