JSFiddle - React, Tailwind, and code Playground

by Pedro Gelli Pereira Tinoco Alves

HTML

<div class="main-container">
	            <div class="main wrapper clearfix">
	            	<div id="gallery-work">
		            	<div id="gallery-warper" >
                            
		            		<div class="img-container" >
		            			<img src="img/gallery/work/001Large.jpg" alt="" />
		            		</div>
		            		
		            		<div class="img-container" >
		            			<img src="img/gallery/work/002Large.jpg" alt="" width="100%" />
		            		</div>
		            		
		            		<div class="img-container" >
		            			<img src="http://www.pageresource.com/wallpapers/wallpaper/renault-alpine-concept-car_723084.jpg" alt="" width="100%" />
		            		</div>
		            		
		            		<div class="img-container" >
		            			<img src="http://www.digitaltrends.com/wp-content/uploads/2013/03/fisker-karma-rendering-red.jpg" alt="" width="100%" />
		            		</div>
		            		
		            		<div class="img-container" >
		            			<img src="http://www.wallpick.com/wp-content/uploads/2014/01/12/car_wallpaper.jpg" alt="" width="100%" />
		            		</div>
		            		
		            		<div class="img-container" >
		            			<img src="http://www.highsnobiety.com/files/2013/05/lamborghini-egoista-concept-car-9.jpg" alt="" width="100%" />
		            		</div>
		            		
		            		<div class="img-container" >
		            			<img src="http://www.wallpick.com/wp-content/uploads/2014/01/15/fast-cars-mazda-blue-cool-awsome-hd-car-376508.jpg" alt="" width="100%" />
		            		</div>
		            		
		            		<div class="img-container" >
		            			<img src="img/gallery/work/004.jpg" alt="" width="100%" />
		            		</div>
		            		
		            	</div>
	            	</div>
	            	
	             
	            	       
	            	       
	            	       
	            	              
	            </div> <!-- #main -->
	        </div>...

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

function setSRCImagens(caminho){
	$('.img-container img').each(function(index){
        $(this).attr('src', caminho+index+'.jpg');
        $(this).attr('index', caminho+index);
  	});      
}

$(document).ready(function () {
	var newImgLocation = '<div id="showimg" class="midway-horizontal midway-vertical"><img class="imgshow midway-horizontal midway-vertical" src=""/></div>';

	setSRCImagens("img/gallery/work/");

    $("img").click(function () {
		$(".main-container").append(newImgLocation);
        $('#showimg img').attr('src', $(this).attr('index')+'Large.jpg');
		Midway();
		$("#showimg").click(function() {
			$(this).remove();
		});
	}); 
});