JSFiddle - React, Tailwind, and code Playground

HTML

<a class="bluecircle" href="#">
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
</a>

<a class="bluecircle" href="#">
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
</a>

<a class="bluecircle" href="#">
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
</a>

<a class="bluecircle" href="#">
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
</a>
<a class="bluecircle" href="#">
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
</a>

<a class="bluecircle" href="#">
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
</a>

<a class="bluecircle" href="#">
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
</a>

<a class="bluecircle" href="#">
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
</a>

<a class="bluecircle" href="#">
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
</a>

<a class="bluecircle" href="#">
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
</a>
<a class="bluecircle" href="#">
    <img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/en/0/00/Crystal_Castles_-_III_album_cover.png"/>
</a>

<a class="bluecircle" href="#">
    <img width="150px" height="150px"...

CSS

a.bluecircle {
    display: block;
    filter: grayscale(100%);
    height: 150px;
    position: relative;
    margin-bottom: 40px;
    width: 150px;
}
a.bluecircle:before {
    border-radius: 150px;
	content: "";
	position: absolute;
	top: 20px;
	left: 20px;
	width: 150px;
    height: 150px;
	background: none;
    transition: background .2s linear;
}
a.bluecircle:hover:before {
	background: rgba(0, 138, 184, .5);	
}
a.bluecircle:hover {
	filter: grayscale(0%);	
}
img {
    border-radius: 150px;
    padding: 20px;
}