First draft of gallerie

assets/css/main.css

@@ -507,28 +507,48 @@ footer {
     }
 }
 
-.galerie-table {    
-  align-items: center;
-  display:inline-block;    
-  margin-right: auto;    
-  margin-left: auto;  
-   line-height: 0;       
-    -webkit-column-count: 5;    
-    -webkit-column-gap: 0px;    
-    -moz-column-count: 5;
-    -moz-column-gap: 0px;
-     column-count: 5;    
-     column-gap: 0px;    
-}  
-
-.galerie-entry {
-  padding: 8px;
+.galerie-table {
+    columns: 3 300px;
+    column-gap: 1.5rem;
+    width: 90%;
+    margin: 10px auto;
+    line-height: 0;
 }
 
-.galerie-image {    
-  width: 100%;
-  border-radius: 8px;
-  box-shadow: 0 0 16px #333;
-   width: 100% !important;    
-   height: auto !important;  
-}  
+.galerie-entry {
+    cursor: pointer;
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    height: 100%;
+    margin: 10px 0;
+    border-radius: 8px;
+    box-shadow: 0 0 16px #333;
+}
+
+.galerie-image {
+    width: 100%;
+    display: inline-block;
+    border: 0;
+    position: relative;
+    -webkit-transition: all 200ms ease-in;
+    -webkit-transform: scale(1);
+    -ms-transition: all 200ms ease-in;
+    -ms-transform: scale(1);
+    -moz-transition: all 200ms ease-in;
+    -moz-transform: scale(1);
+    transition: all 200ms ease-in;
+    transform: scale(1);
+}
+
+.galerie-image:hover {
+    z-index: 2;
+    -webkit-transition: all 200ms ease-in;
+    -webkit-transform: scale(1.1);
+    -ms-transition: all 200ms ease-in;
+    -ms-transform: scale(1.1);
+    -moz-transition: all 200ms ease-in;
+    -moz-transform: scale(1.1);
+    transition: all 200ms ease-in;
+    transform: scale(1.1);
+}