JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script src="/js/masonry.pkgd.min.js"></script>

</head>

<body>
	<div class="menucat">
		<h1><small>
			<a class="all" href="#">All</a>
			<a class="2D" href="#2d">2D</a>
			<a class="3D" href="#3d">3D</a>
			<a class="Anim" href="#anim">Anim</a>
		</small></h1>
	</div>
	<div id="container">
		<project class="bloc 3d">
			<a class="thumb" href="#project1">
				<div id="project1" class="item"><img src="http://placehold.it/205x137" alt="" width="205" height="137"/></div>
			</a>
			<div class="info">
				<img src="http://placehold.it/615x274" alt="" width="615" height="274"/>
				<div class="contmeta">
					<div class="suite">voir la suite</div>
					<div class="titre">le paysage de la vie nocturne</div>
					<span class="meta">
						<span class="desc">comment contenu de la deescriptino comment contenu de la deescriptin</span>
					</span>
				</div>
			</div>
		</project>  
		<project class="bloc 2d">
			<a class="thumb" href="#project2">
				<div id="project2" class="item"><img src="http://placehold.it/205x137" alt="" width="205" height="137"/></div>
			</a>
			<div class="info">
				<img src="http://placehold.it/615x274" alt="" width="615" height="274"/>
				<div class="contmeta">
					<div class="suite">voir la suite</div>
					<div class="titre">le paysage de la vie nocturne</div>
					<span class="meta">
						<span class="desc">comment contenu de la deescriptino comment contenu de la deescriptin</span>
					</span>
				</div>
			</div>
		</project> 
		<project class="bloc 3d">
			<a class="thumb" href="#project3">
				<div id="project3" class="item"><img src="http://placehold.it/205x137" alt="" width="205" height="137"/></div>
			</a>
			<div class="info">
				<img src="http://placehold.it/615x274" alt="" width="615"...

CSS

body {
    font-family: sans-serif;
}

#container {
    border: 1px solid;
    padding: 5px;
	width:100%;
}
.bloc{
	float:left;
	height: 137px;
}
.item {
    width: 205px;
    height: 137px;
    float: left;
    background: #CCC;
	text-align:center;
}
.thumb{
	width: 205px;
	height: 137px;
}

.unfold {
    width: 615px;
    height: 274px;
}

.info .contmeta {
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	height: 60px;
	font-size: 12px;
}

.info {
	display:none;
	z-index: 3;
	width: 615px;
    height: 274px;
}

.inactive {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
}
.active {
	display:block;
    opacity: 1;
    border-bottom-color: #19aea5;
    -webkit-box-shadow: 0px 0px 5px #cecece;
    -moz-box-shadow: 0px 0px 5px #cecece;
    box-shadow: 0px 0px 5px #cecece;
}
.hidden{
display:none;
}
.info .contmeta {
	display:none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	height: 60px;
	font-size: 12px;
}
.info .titre {
	padding-bottom:43px;
	position: absolute;
	bottom: 0;
	left: 20px;
}
.info .suite {
	margin-top:-200px;
	position: absolute;
	top: 0;
	right: 20px;
}
.info .desc {
	position: absolute;
	padding-left:10px;
	bottom: 0;
	height:44px;
	width:605px;
	background-color: #bab6b6;
	border-top: 1px dashed #e7e7e7;
}

JavaScript

$(function()
{
	var hash;

	function EventHash()
	{
		$('.item').removeClass('unfold');
		hash = window.location.hash;
		$(hash).parent().addClass('hidden');
		var project = $(hash).parent().parent();
		project.addClass('active unfold');
		project.find('.info').addClass('unfold active').stop().animate({opacity: 1}, 300);
		if(hash != ''){
			$('#container').find(".bloc:not('.unfold')").addClass('inactive');
		}
		//project.find('.contmeta').addClass('active').stop().slideDown(200);
		$('#container').masonry();
	}

	$('#container').masonry(
	{
		itemSelector: '.bloc',
		columnWidth: 205
	});

	if (hash != 'undefined')
	{
		EventHash();
	}

	window.onhashchange = function()
	{
		EventHash();
	};
	
	
	/////////////////////////////////////////////
	// click all , affiche tous Comment depart
	//\______________________________________________________________
	$('.all').click(function(){
		$('#container').find('.bloc').removeClass('active').stop().animate({opacity: 1}, 300);
		$('#container').find('.bloc').removeClass('hidden').stop().animate({opacity: 1}, 300); 
		
		
		$('#container').find('.info.unfold').removeClass('unfold active').stop().animate({opacity: 1}, 300); 	
		$('#container').find('.bloc.unfold').removeClass('unfold').stop().animate({opacity: 1}, 300); 
		$('#container').find('a.thumb.hidden').removeClass('hidden').stop().animate({opacity: 1}, 300); 
		
		$('#container').masonry(); 
	});
	
	/////////////////////////////////////////////
	// click sur les liens de categorie
	//\______________________________________________________________
	$('h1 a').click(function(){
		var cls = $(this).attr('href').replace('#','');
		console.log(cls);
		$('#container').find('.bloc').removeClass('active inactive hidden').stop().animate({opacity: 1}, 300);

		$('#container').find(".bloc:not('."+cls+"')").addClass('hidden').animate({opacity: 0}, 300);;
		$('#container').find('.bloc...