$(function(){
  		$('#liste').masonry({columnWidth: 200});
		
		$('h1 a').css('opacity', '0');
		$('#infos').css('opacity', '0');
		
		$('#lien-liste').css('opacity', '0.25');
		$('#lien-liste').hover(
			function () {
				$(this).css('border','none');
				$(this).animate({
					opacity: 0.5,
				}, {
					duration: 250,
					queue: true
				});
			},
			function () {
				$(this).animate({
					opacity: 0.25,
				}, {
					duration: 250,
					queue: true
				});
			}
		);
		
		
		$('#droite').hover(
			function () {
				$('h1 a').animate({
					opacity: 1,
				}, {
					duration: 250,
					queue: true
				});
				$('#infos').animate({
					opacity: 1,
				}, {
					duration: 250,
					queue: true
				});
			},
			function () {
				$('h1 a').animate({
					opacity: 0,
				}, {
					duration: 250,
					queue: true
				});
				$('#infos').animate({
					opacity: 0,
				}, {
					duration: 250,
					queue: true
				});
			}
		);
		
		$('#liste div').hover(
			function(){
				$('#liste div').addClass("out");
				$(this).removeClass("out");
				$(this).addClass("hover");
				$('.hover').animate({
					opacity: 1,
					boxShadow: '6px 6px 4px #ccc'
				}, {
					duration: 250,
					queue: false
				});
				$('.out').animate({
					opacity: 0.5
				},{
					duration: 250,
					queue: false
				});
			},
			function(){
				$('#liste div').removeClass("out").removeClass("hover");
				$('#liste div').animate({
					opacity: 1
				},{
					duration: 250,
					queue: false
				});
				$(this).animate({
					boxShadow: '3px 3px 4px #ccc'
				}, {
					duration: 250,
					queue: false
				});
			}
		);
  	});