<body id="core">
<dl id="gallery">
<dt>
<a href="#pic1">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/false-creek-small.jpeg" alt="False Creek, Vancouver, British Columbia">
</a>
<dd id="pic1">
<a href="#core">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/false-creek.jpeg" alt="False Creek, Vancouver, British Columbia">
</a>
<dt>
<a href="#pic2">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-louise-small.jpeg" alt="Lake Louise, Alberta, Canada">
</a>
<dd id="pic2">
<a href="#core">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-louise.jpeg" alt="Lake Louise, Alberta, Canada">
</a>
<dt>
<a href="#pic3">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/wheat-field-small.jpeg" alt="Wheatfield, Saskatchewan, Canada">
</a>
<dd id="pic3">
<a href="#core">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/wheat-field.jpeg" alt="Wheatfield, Saskatchewan, Canada">
</a>
</dl>@keyframes photopresent {
0% { width: 0; height: 0; opacity: 0; }
30% { width: 640px; height: 0; opacity: 0; }
60% { width: 640px; height: 427px; opacity: 0; margin: 20px; }
100% { width: 640px; height: 427px; opacity: 1; margin: 20px; }
}
html { min-height: 100%; position: relative; }
body { margin: 0; height: 100%; margin-right: 2em; background: #110; }
dl { float: left; }
dd a {
background: #fff; display: inline-block;
transition: 4s box-shadow ease-in;
}
dt { margin-left: 1.2rem; width: 150px; margin-top: 1.2rem; }
dt img { width: 150px; height: 150px; }
dd a img { width: 640px; height: 427px; }
dd {
margin-left: 0; background: rgba(0,0,0,0);
position: absolute; top: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
}
dd:target {
visibility: visible;
background: rgba(0,0,0,0.6);
transition: .35s background linear;
}
dd:target a {
box-shadow: 0 0 8px 8px rgba(0,0,0,0.3);
}
dd:target a img {
animation: photopresent 3s forwards;
}
body:target dl dd {
background: rgba(0,0,0,0);
transition: 1.5s background ease-out;
}
External CSS
This Pen doesn't use any external CSS resources.