Edit in JSFiddle

<ul class="acordeon horizontal">
	<li>
		<a href="URL DO POST">
			<img src="URL DA IMAGEM" alt="TÍTULO">
		</a>
	</li>
	<li>
		<a href="URL DO POST">
			<img src="URL DA IMAGEM" alt="TÍTULO">
		</a>
	</li>
	<li>
		<a href="URL DO POST">
			<img src="URL DA IMAGEM" alt="TÍTULO">
		</a>
	</li>
	<li>
		<a href="URL DO POST">
			<img src="URL DA IMAGEM" alt="TÍTULO">
		</a>
	</li>
	<li>
		<a href="URL DO POST">
			<img src="URL DA IMAGEM" alt="TÍTULO">
		</a>
	</li>
</ul>

<ul class="acordeon horizontal">
	<li>
		<a href="URL DO POST">
			<img src="https://lh6.googleusercontent.com/-5uWRWOmqZnw/VBIJ5oRYvdI/AAAAAAAAG9Y/mf8q6HVWEko/w600-h200-no/A%2Bbeleza%2Bda-natureza%2Bna

%2Blente%2Bdo%2Bfot%C3%B3grafo%2Bbrasileiro%2BMarcelo%2BKrauses%2B%2B1.jpg" alt="Foto:Marcelo Krauses">
		</a>
	</li>
	<li>
		<a href="URL DO POST">
			<img src="https://lh6.googleusercontent.com/-Lkl-7G9I5Zk/VBIK2yVhJuI/AAAAAAAAG-A/4Xgl3UxV4I0/w600-h200-no/A%2Bbeleza%2Bda-natureza%2Bna

%2Blente%2Bdo%2Bfot%C3%B3grafo%2Bbrasileiro%2BMarcelo%2BKrauses%2B2.jpg" alt="Foto:Marcelo Krauses">
		</a>
	</li>
	<li>
		<a href="URL DO POST">
			<img src="https://lh5.googleusercontent.com/-KvdG8_FUQ4Q/VBILouEtBZI/AAAAAAAAG-s/TzD7YrqARzw/w600-h200-no/A%2Bbeleza%2Bda%2Bnatureza%2Bna

%2Blente%2Bdo%2Bfot%C3%B3grafo%2Bbrasileiro%2BMarcelo%2BKrauses%2B%2B3.jpg" alt="Foto:Marcelo Krauses">
		</a>
	</li>
	<li>
		<a href="URL DO POST">
			<img src="https://lh6.googleusercontent.com/-QNTSdzquEJg/VBIL2UiNO-I/AAAAAAAAG_E/PBLA6SrMAWQ/w600-h200-no/A%2Bbeleza%2Bda%2Bnatureza%2Bna

%2Blente%2Bdo%2Bfot%C3%B3grafo%2Bbrasileiro%2BMarcelo%2BKrauses%2B%2B4.jpg" alt="Foto:Marcelo Krauses">
		</a>
	</li>
	<li>
		<a href="URL DO POST">
			<img src="https://lh3.googleusercontent.com/-VsQHvEo1iZI/VBIMP_HiQ3I/AAAAAAAAG_c/hHtPZXxPNL0/w600-h200-no/A%2Bbeleza%2Bda%2Bnatureza%2Bna

%2Blente%2Bdo%2Bfot%C3%B3grafo%2Bbrasileiro%2BMarcelo%2BKrauses%2B5.jpg" alt="Foto:Marcelo Krauses">
		</a>
	</li>
</ul>

.acordeon {
	margin: 30px auto;
	padding: 0;
	list-style-type: none;
	overflow: hidden; 
}
.acordeonli {
	margin: 0;
	padding: 0;
	overflow: hidden;

	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.acordeon.horizontal {
	width: 800px;
	height: 200px;
}
.acordeon.horizontal li {
	width: 160px;
	height: 200px;
	float: left;
}

.acordeon.horizontal:hover li {
	width: 50px;
}
.acordeon.horizontal li:hover {
	width: 600px;
}