<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.