JSFiddle - React, Tailwind, and code Playground

HTML

<a class="img-wrap" href="#"><img src="http://graycat.ua.hyperdomen.com/portfolio/7.jpg" alt=""></a>
	<a class="img-wrap" href="#"><img src="http://graycat.ua.hyperdomen.com/portfolio/6.jpg" alt=""></a>
	<a class="img-wrap" href="#"><img src="http://graycat.ua.hyperdomen.com/portfolio/9.jpg" alt=""></a>

CSS

.img-wrap {
			display: inline-block;
			width: auto;
			height: auto;
			position: relative;
			padding: 5px;
		}
		.img-wrap:after, .img-wrap:before  {
			content: '';
			opacity: 0;
			-webkit-transition: all .5s;
				transition: all .5s;
		}
		.img-wrap:after {
			background-color: rgba(232, 138, 136, .5);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 8px;
		}
		.img-wrap:before {
			background: #fff url(http://graycat.ua.hyperdomen.com/portfolio/zoom.jpg) no-repeat center center;
			width: 75px;
			height: 75px;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -38px 0 0 -38px;
			z-index: 5;
		}
		.img-wrap:hover:before,
		.img-wrap:hover:after {
			opacity: 1;
		}
		.img-wrap img {
			border-radius: 8px;
			display: block;
		}