<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<input type="radio" name="zoom" id="france"><label for="france">France</label>
<input type="radio" name="zoom" id="japan"><label for="japan">Japan</label>
<input type="radio" name="zoom" id="us"><label for="us">United States</label>
<figure id="zoom-gallery">
  <img src="central-park-in-fall.jpg" alt="Central Park In Fall" class="us">
  <img src="kyoto-bamboo-walk.jpg" alt="Kyoto bamboo walk" class="japan">
  <img src="kyoto-forest-walk.jpg" alt="Kyoto forest walk" class="japan">
  <img src="paris-reflected.jpg" alt="Paris reflected" class="france">
  <img src="paris-skyline.jpg" alt="Paris skyline" class="france">
  <img src="yosemite-clouds.jpg"" alt="Yosemite clouds" class="us">
</figure>
body { 
  background: #121113;
  text-align: center;
  padding-top: 2rem; 
}
figure#zoom-gallery {
  margin: 0;
  margin-top: 1rem;
  padding: 0;
  overflow: hidden; 
}
figure#zoom-gallery img { 
  width: 25%; 
  max-width: 300px; 
  margin: 4%; 
  transition: .7s all ease-in-out;
  box-shadow: 0 0 5px 0 #000; 
} 
label { 
  color: #fff;
  font-family: Futura, sans-serif;
  padding: .5em;
  font-size: 1.5rem;
  text-shadow: 0 0 2px #000;
  border: 1px solid #333;
  border-radius: 2px;
  margin: 2%; 
}
label:hover { 
  cursor: pointer; background: #000; 
}
input[type=radio] { display: none; }
input#japan:checked ~ figure img.japan, input#us:checked ~ figure img.us, input#france:checked ~ figure img.france { 
  transform: scale(1.1); box-shadow: 0 0 10px 0px #000; 
} 
input#japan:checked ~ figure img:not(.japan), input#us:checked ~ figure img:not(.us), input#france:checked ~ figure img:not(.france) { 
  transform: scale(0.9);
  opacity: 0.6;
  box-shadow: 0 0 2px 0 #000; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js