JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<img src="http://www.pageresource.com/wallpapers/wallpaper/renault-alpine-concept-car_723084.jpg"
     class="img-container"
     data-large-img="hello world!" />

CSS

.img-container {
	width: 22.4%;
	display: inline-block;
	margin: 0.6% 0.4%;
	opacity: 1;
	background-color: black;
}
.img-container img {
	opacity: 0.7;
}
.img-container img:hover {
	opacity: 1;
}

#gallery-warper {
	width: 90%;
	display: inline-block;
	margin: 0 7%;
}

#showimg {
	/*margin-top: -40%;
	position: absolute;
	margin-left: 31%;*/
	width: 100%;
	height: 100%;
	margin-top: -46.7%;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
}
.imgshow {
	/*margin: 10% 31%;*/
	max-width: 80%;
}

JavaScript

$(document).ready(function () {
    $("img").click(function() {
        var imgLocation = $(this).data("large-img");
        alert(imgLocation);
    });
});