added video overview thumbnails

css/main.css

@@ -6,6 +6,10 @@ body {
   color: white;
 }
 
+p {
+  margin: 0px;
+}
+
 .container {
   height:100vh;
   display: grid;
@@ -61,7 +65,7 @@ map {
 }
 
 .description {
-  padding: 15px 60px 15px 60px;
+  padding: 15px 60px;
 }
 
 h2 {
@@ -72,52 +76,6 @@ h2 {
   padding-bottom: 5px;
 }
 
-@media screen and (max-width: 44.001em) {
-
-  .container {
-    height:100vh;
-    display: grid;
-    grid-template-rows: 80px auto 300px 1fr;
-    grid-template-columns: 100%;
-    grid-row-gap: 0px;
-    grid-template-areas:
-      "logo"
-      "navigation"
-      "map"
-      "content"
-    ;
-  }
-
-  content {
-    overflow-y: inherit;
-  }
-
-  .burger_menu {
-    display: block;
-    float:right;
-    width: 30px;
-    height: 25px;
-    margin: 18px;
-  }
-
-}
-
-
-/* .avatar-frame,.avatar-frame img{
-	width: 100px;
-	height: 100px;
-	border-radius: 60px;
-} */
-
-.grid__item {
-    position: relative;
-    width: 25%;
-    padding-left: 1em;
-    padding-right: 1em;
-    padding-top: 0;
-    padding-bottom: 2em;
-}
-
 .grid {
     display: flex;
     flex-wrap: wrap;
@@ -127,6 +85,16 @@ h2 {
     padding: 1.5em 0 1em;
     text-align: center;
     user-select: none;
+    justify-content: center;
+}
+
+.grid__item {
+    position: relative;
+    width: 27%;
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-top: 0;
+    padding-bottom: 2em;
 }
 
 .profile-img {
@@ -182,3 +150,45 @@ h1, h2, h3, h4, h5, h6 {
     color: #7f7f7f;
     color: rgba(255,255,255,.5);
 }
+
+@media screen and (max-width: 44.001em) {
+
+  .container {
+    height:100vh;
+    display: grid;
+    grid-template-rows: 80px auto 300px 1fr;
+    grid-template-columns: 100%;
+    grid-row-gap: 0px;
+    grid-template-areas:
+      "logo"
+      "navigation"
+      "map"
+      "content"
+    ;
+  }
+
+  content {
+    overflow-y: inherit;
+  }
+
+  .burger_menu {
+    display: block;
+    float:right;
+    width: 30px;
+    height: 25px;
+    margin: 18px;
+  }
+
+  .description {
+    padding: 15px 20px;
+  }
+
+  .grid__item {
+      position: relative;
+      width: 30%;
+      padding-left: 1em;
+      padding-right: 1em;
+      padding-top: 0;
+      padding-bottom: 2em;
+  }
+}

css/overview.css

+#video_item {
+  width: 100%;
+  display: inline-block;
+  position: relative;
+  margin: 10px 0px 0px 0px;
+  border: 1px solid rgba(255,255,255,0.25);
+}
+#video_item .video_thumb {
+  width: 70px;
+  height: 70px;
+  float: left;
+  position: relative;
+  margin-right: 10px;
+}
+#video_item .video_overlay {
+  visibility: visible;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 2;
+  opacity: 0.7;
+  background-image: url('../images/controller-play.svg');
+  background-repeat: no-repeat;
+  background-position: 15px;
+  background-size: 50px;
+}
+#video_item:hover {
+  background: rgba(255,255,255,0.10);
+}
+#video_item .video_title {
+  padding: 5px;
+  font-size: 18px;
+  line-height: 20px;
+}
+#video_item .video_description {
+}
+.small {
+  color: rgba(255,255,255,.5);
+  font-size: 12px;
+}
+#video_item .video_duration {
+  float: right;
+  margin-right: 5px;
+}

images/controller-play.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+<path fill="#FFFFFF" d="M15,10.001c0,0.299-0.305,0.514-0.305,0.514l-8.561,5.303C5.51,16.227,5,15.924,5,15.149V4.852  c0-0.777,0.51-1.078,1.135-0.67l8.561,5.305C14.695,9.487,15,9.702,15,10.001z"/>
+</svg>
\ No newline at end of file

index.html

@@ -6,6 +6,7 @@
     <title>Ausstellung-Virtuell | Folge und Varianz</title>
     <link rel="stylesheet" type="text/css" href="css/main.css">
     <link rel="stylesheet" type="text/css" href="css/player.css">
+    <link rel="stylesheet" type="text/css" href="css/overview.css">    
     <script src='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
     <link href='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
   </head>
@@ -32,12 +33,10 @@
           <div class="overlay"></div>
           <video id="video" width="100%" height="100%" poster="images/video1_poster.png">
 
-            <!-- Video here -->
             <source src="https://cdn-storage.br.de/MUJIuUOVBwQIbtC2uKJDM6OhuLnC_2rc5H1S/_AJS/_A4f5y4p9U1S/89a94450e10911e7a0b0984be10adece_B.mp4" type="video/mp4">
               <p>Error: your browser doesn't support HTML5 video.</p>
             </video>
 
-            <!-- Markup to replace default interface -->
             <div id="video-controls">
               <div class="controls">
                 <button type="button" id="play-pause" class="icon play"><span class="icon-play" aria-hidden="true"></span></button>

js/main.js

@@ -5,3 +5,11 @@ $( "#overview" ).click(function() {
 $( "#about" ).click(function() {
   $( "content" ).load( "about.html" );
 });
+
+$("#video_item").mouseenter(function() {
+  $(".video_overlay").show();
+});
+
+$("#video_item").mouseleave(function() {
+  $(".video_overlay").show();
+});

overview.html

@@ -8,19 +8,25 @@
       Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
       Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
       Bla bla bla Bla bla bla Bla bla bla
-      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
-      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
-      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
 
-      <section class="overview">
-        <span class="overview_item">
-          <img src="images/video1_poster.png">
-          Titel
-          Beschreibung
-          Länge
-        </span>
-      </section>
+      <br><br>
+
+      <div id="video_item">
+        <div class="video_overlay"></div>
+        <div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
+        <p class="video_title">Form und Farbe 1</p>
+        <p class="video_description small">Form follows function 1</p>
+        <p class="video_duration small">00:31:00</p>
+      </div>
+      <div id="video_item">
+        <div class="video_overlay"></div>
+        <div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
+        <p class="video_title">Form und Farbe 1</p>
+        <p class="video_description small">Form follows function 1</p>
+        <p class="video_duration small">00:31:00</p>
+      </div>
 
     </div>
+    <script src="js/main.js"></script>
   </body>
 </html>