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

External JavaScript

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