JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imagen">
    <img src="http://images.elephantjournal.com/wp-content/uploads/2012/10/forest-dark-path.jpg" />
</div>

CSS

.imagen {
    height: 200px;
    position: relative;
    width: 200px;    
}
.imagen:before {
    border-radius: 100%;
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200px;
    height: 200px;
	background: transparent;
    transition: background .2s linear;
}
.imagen:hover:before {
    background: rgba(0, 0, 0, .5);
 }

img {
    border-radius: 100%;
    width: 200px;
}