Creates an effect like that of the LOC book showcase. A CodePen by Jdias. Responsive grid & background slide -

index.html

<link href='http://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
<div id="wrapper">

	<div id="list">
		<div class="item" id="primeiro" style="height: 14em;">
      <p class="titulo">Winterfell</p>
		</div>
		<div class="item" id="segundo" style="height: 26em;">
		  <p class="titulo">Jon Snow</p>
		</div>
		<div class="item" id="terceiro" style="height: 14em;">
		  <p class="titulo">Wildling</p>
		</div>
		<div class="item" id="quarto" style="height: 14em;">
		  <p class="titulo">WhiteWalker</p>
		</div>
		<div class="item" id="quinto" style="height: 8em;">
		  <p class="titulo">Lannister</p>
		</div>
		<div class="item" id="sexto" style="height: 18em;">
		  <p class="titulo">khaleesi</p>
		</div>
		<div class="item" id="setimo" style="height: 12em;">
		  <p class="titulo">khaleesi</p>
		</div>
	</div>
</div>

script.js

// Responsive grid from jquery mansonary plugin
// http://masonry.desandro.com


$(function(){Socialite.load();});
$('.item').fadeTo(0, 0.5);

   $('.item').mouseenter(function(){
    
    $( this ).stop().animate({'background-position': '-250px'}, 1000, 'swing');
     $( this ).fadeTo( 500 , 0.9, 'linear');

    });
  $('.item').mouseleave(function(){
   
    $( this ).stop().animate({'background-position': '-40px'}, 1000, 'swing');
     $( this ).fadeTo( 1000 , 0.5, 'linear');
    
    });

style.css

#primeiro { position:relative; background-image:url('https://lh6.googleusercontent.com/-96xqBYwpwpg/UYgFRWkokNI/AAAAAAAAT9s/gKSmMU5T4lM/w800-h800/Game-of-thrones-stark-kids.jpg'); background-position:-40px; background-repeat:no-repeat;}	
#segundo { position:relative; background-image:url('http://i.telegraph.co.uk/multimedia/archive/02151/game_of_thrones_2151576b.jpg'); background-position:-40px; background-repeat:no-repeat;}	
#terceiro { position:relative; background-image:url('http://www.endofshow.com/wp-content/uploads/ygr.jpg'); background-position:-40px; background-repeat:no-repeat;}	

#quarto { position:relative; background-image:url('http://cdn1.screenrant.com/wp-content/uploads/game-of-thrones-season-3-whitewalker.jpg'); background-position:-40px; background-repeat:no-repeat;}	

#quinto { position:relative; background-image:url('http://blog.stalker.com.br/wp-content/uploads//2013/03/game-of-thrones-12-20110505-size-598.jpg'); background-position:-40px; background-repeat:no-repeat;}	

#sexto { position:relative; background-image:url('http://resources0.news.com.au/images/2013/04/03/1226611/771140-game-of-thrones.jpg'); background-position:-40px; background-repeat:no-repeat;}

#setimo { position:relative; background-image:url('http://www.papodeblogueiro.com/wp-content/uploads/2012/08/as-mulheres-de-game-of-thrones.jpg'); background-position:-40px; background-repeat:no-repeat;}

.titulo {position:absolute;display:block; width:100%; background-color:#20d8b8; bottom:-16px; line-height:30px; margin-top:0px; text-align:center;}
body
		{
		  font-family: 'Lato';
			background-color: #999;
      color:#363636;
			padding: 3.75em 1.875em; /* 60px 30px */
		}

			h1,
			h1 a
			{
				color: #fff;
				color: rgba( 255, 255, 255, .5 );
			}
				h1 a:hover
				{
					color: #fff;
				}

		#wrapper
		{
			max-width: 60em; /* 960 px */
			margin: 0 auto;
		}
			#list
			{
				width: 100%;
				overflow: hidden;
				margin-bottom: -1.875em; /* 30px */
				-webkit-column-count: 3;
				-webkit-column-gap: 1.875em; /* 30px */
				-webkit-column-fill: auto;
				-moz-column-count: 3;
				-moz-column-gap: 1.875em; /* 30px */
				-moz-column-fill: auto;
				column-count: 3;
				column-gap: 1.875em; /* 30px */
				column-fill: auto;
			}
				.item
				{
				
					background-color: #fff;
					background-color: rgba( 255, 255, 255, .5 );
					margin-bottom: 1.875em; /* 30px */
					-webkit-column-break-inside: avoid;
					-moz-column-break-inside: avoid;
					column-break-inside: avoid;
          cursor:pointer;
				}

		@media only screen and ( max-width: 40em ) /* 640px */
		{
			#list
			{
				-webkit-column-count: 2;
				-webkit-column-gap: 0.938em; /* 15px */
				-moz-column-count: 2;
				-moz-column-gap: 0.938em; /* 15px */
				column-count: 2;
				column-gap: 0.938em; /* 15px */
			}
				.item
				{
					margin-bottom: 0.938em; /* 15px */
				}
		}

		@media only screen and ( max-width: 20em ) /* 320px */
		{
			#list
			{
				-webkit-column-count: auto;
				-moz-column-count: auto;
				column-count: auto;
			}
		}