added lightbox for images

style/freibier.css

@@ -251,6 +251,44 @@ img {
   top: 0;
 }
 
+.lightbox {
+  /* Default to hidden */
+  display: none;
+
+  /* Overlay entire screen */
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  /* A bit of padding around image */
+  padding: 1em;
+
+  /* Translucent background */
+  background: rgba(0, 0, 0, 0.8);
+}
+
+/* Unhide the lightbox when it's the target */
+.lightbox:target {
+  display: block;
+}
+
+.lightbox span {
+  /* Full width and height */
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  /* Size and position background image */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+
+
 @media (min-width: 54em) {
   .header li {
     float: left;
@@ -287,3 +325,4 @@ img {
   width: 95%;
   }
 }
+

wieallesbegann.html

@@ -58,8 +58,15 @@
   </div>
   <div class="column right">
     <h2>Michael und Sven</h2>
-    <img src="img/dinosven1.jpg" alt="">
+<a href="#img1">
-    <p>Die beiden Brauer von freibier.cc </p>    
+  <img src="img/dinosven1.jpg">
+</a>
+
+<!-- lightbox container hidden with CSS -->
+<a href="#" class="lightbox" id="img1">
+  <span style="background-image: url('img/dinosven1.jpg')"></span>
+</a>
+   <p>Die beiden Brauer von freibier.cc </p>
   </div>
 </div>