• 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="contenedor-img">
        <div class="item"><img src="uros_puno.png" class="f1"></div>
        <div class="item"><img src="machupiccchu.png" class="f2"></div>
        <div class="item"><img src="arequipa.png" class="f3"></div>
        <div class="item"><img src="cusco_ciudad_imperial.png" class="f2"></div>
        <div class="item"><img src="isla_suasi.png" class="f1"></div>
        <div class="item"><img src="puno.png" class="f1"></div>
        <div class="item"><img src="sillustani_puno.png" class="f1"></div>
        <div class="item"><img src="sacsayhuaman_cusco.png" class="f2"></div>
        <div class="item"><img src="yanahuara_arequipa.png" class="f3"></div>
	</div>
	
</div>

CSS

.contenedor{
	font-family:sans-serif;
	font-size:11pt;
}
.botones{
    text-align:center;
}
.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;
}
.contenedor-img{
    
	display   : flex;
	flex-wrap : wrap;
	justify-content:center;
	
	padding:0.5rem 0rem;
	background-color:#633f9d;

}
.contenedor-img .item{
    padding:0.5rem;
}
.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");
		
	});

});