• HTML
• CSS
• JS

HTML

<div class="contenedor">
	<ul class="botones">
		<li fil='f1'><a id="filtro">Puno</a></li>
		<li fil='f2'><a id="filtro">Cusco</a></li>
		<li fil='f3'><a id="filtro">Arequipa</a></li>
	</ul>
	<div class="tabla">
		<div class="fila">
			<div class="celda"><img src="uros_puno.png" class="f1"></div>
			<div class="celda"><img src="machupiccchu.png" class="f2"></div>
			<div class="celda"><img src="arequipa.png" class="f3"></div>
		</div>
		<div class="fila">
			<div class="celda"><img src="cusco_ciudad_imperial.png" class="f2"></div>
			<div class="celda"><img src="isla_suasi.png" class="f1"></div>
			<div class="celda"><img src="puno.png" class="f1"></div>
		</div>
		<div class="fila">
			<div class="celda"><img src="sillustani_puno.png" class="f1"></div>
			<div class="celda"><img src="sacsayhuaman_cusco.png" class="f2"></div>
			<div class="celda"><img src="yanahuara_arequipa.png" class="f3"></div>
		</div>
	</div>
</div>

CSS

.contenedor{
	font-family:sans-serif;
	font-size:11pt;
}
.botones{
	margin:0px;
	padding:0px;
}
.botones li{
	display:inline-block;
	list-style:none;
}
.botones li a{
	background-color:#f0f0f0;
    color:#333;
    border:1px solid #ccc;
	cursor:pointer;
	border-radius:3px;
	margin:4px 2px;
	padding:4px 20px;
	display:block;
}
.botones li.activo a{
	background-color: #cb1879;
	border:1px solid #b10663;
    color: #fff;
}

.tabla{
	display:table;
	background-color:#633f9d;
	padding:4px;

}
.fila{
  display: table-row;
}
.celda{
	display:table-cell;
	padding:4px;
}

.opacidad{
	opacity:0.2;
	transition:opacity 0.2s;
}
img{
	opacity:1;
	transition:opacity 0.2s;
}

JS

$(document).ready(function(){
	$(".botones>li").on("click",function(){
		$(this).addClass("activo").siblings().removeClass("activo");
		filtrar=$(this).attr("fil");
		$("img").addClass("opacidad");
		$("."+filtrar).removeClass("opacidad");
	});
	$(".contenedor").mouseup(function(){
		$("img").removeClass("opacidad");
		$(".botones>li").removeClass("activo");
	});

});