diff --git a/example/build/first_gallery/index.html b/example/build/first_gallery/index.html
index 8061da2..151eb18 100644
--- a/example/build/first_gallery/index.html
+++ b/example/build/first_gallery/index.html
@@ -1,142 +1,204 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta charset="UTF-8">
-  <link type="text/css" rel="stylesheet" href="../static/css/fonts.css"  media="screen,projection"/>
-  <link type="text/css" rel="stylesheet" href="../static/css/style-page.css"  media="screen,projection"/>
-  <link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css"  media="screen,projection"/>
-  <link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css"  media="screen,projection"/>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta charset="UTF-8">
+        <link type="text/css" rel="stylesheet" href="../static/css/fonts.css"  media="screen,projection"/>
+        <link type="text/css" rel="stylesheet" href="../static/css/style-page.css"  media="screen,projection"/>
+        <link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css"  media="screen,projection"/>
+        <link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css"  media="screen,projection"/>
 
-  <!--Let browser know website is optimized for mobile-->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>my first gallery · Example gallery</title>
-</head>
+        <!--Let browser know website is optimized for mobile-->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <title>my first gallery · Example gallery</title>
+    </head>
 
-<body>
-  
-    
+    <body>
+        
+        
 
 <section class="full-picture" style="background: transparent url('stuff.png') no-repeat scroll center top / cover;">
     
-        <div class="picture-text">
-            <div class="picture-text-column">
-                <h1>Beautiful Title</h1>
-                <h2>pouet pouet</h2>
-                <div class="datetime">08 December 2015</div>
-            </div>
+    <div class="picture-text">
+        <div class="picture-text-column">
+            <h1>Beautiful Title</h1>
+            <h2>pouet pouet</h2>
+            
+            
+            <div class="datetime">08 December 2015</div>
+            
         </div>
+    </div>
     
 </section>
-  
-    
+        
+        
+
+
 
 <section class="bordered-picture baguette">
-    <a href="stuff.png">
-        <img src="stuff.png">
-    </a>
+    <div class="caption">
+        <a href="stuff.png ">
+            <img src="stuff.png">
+            
+    </div>
+        </a>
 </section>
-  
-    <section class="text">
+
+
+        
+        
+
+
+
+<section class="bordered-picture baguette">
+    <div class="caption">
+        <a href="stuff.png data-caption="plop"">
+            <img src="stuff.png">
+            
+            <div class="caption__overlay">
+                <h5 class="caption__overlay__title">plop</h5>
+            </div>
+            
+    </div>
+        </a>
+</section>
+
+
+        
+        
+<section class="text">
   « voici plein de blabla à rajouter et <b>ceci est du gras</b> et encore plein plein plein plein de text car je veux voir comment ça va wrapper car c'est important et il faut pas que j'oublie de mettre des margins en % sinon ça va pas le faire alala là ça devrait aller »
 </section>
-  
-    <section class="pictures-group baguette">
+
+        
+        
+<section class="pictures-group baguette">
     
         <div class="pictures-line">
             
-                
-                
-                <div class="picture">
-                    <a href="stuff.png">
-                        <img src="stuff-x600.png">
-                    </a>
-                </div>
-            
-                <div class="separator"></div>
             
             
-                
-                
-                <div class="picture">
-                    <a href="stuff.png">
-                        <img src="stuff-x600.png">
-                    </a>
-                </div>
             
-                <div class="separator"></div>
+            <div class="picture caption">
+                <a href="stuff.png" data-caption="test">
+                    <img src="stuff-x600.png">
+                    
+                    <div class="caption__overlay">
+                        <h5 class="caption__overlay__title">test</h5>
+                    </div>
+                    
+                </a>
+            </div>
+            
+            <div class="separator"></div>
             
             
-                
-                
-                <div class="picture">
-                    <a href="stuff.png">
-                        <img src="stuff-x600.png">
-                    </a>
-                </div>
+            
+            
+            
+            <div class="picture caption">
+                <a href="stuff.png" data-caption="test">
+                    <img src="stuff-x600.png">
+                    
+                    <div class="caption__overlay">
+                        <h5 class="caption__overlay__title">test</h5>
+                    </div>
+                    
+                </a>
+            </div>
+            
+            <div class="separator"></div>
+            
+            
+            
+            
+            
+            <div class="picture caption">
+                <a href="stuff.png" data-caption="test">
+                    <img src="stuff-x600.png">
+                    
+                    <div class="caption__overlay">
+                        <h5 class="caption__overlay__title">test</h5>
+                    </div>
+                    
+                </a>
+            </div>
             
             
         </div>
-    
+        
         <div class="pictures-line">
             
-                
-                
-                <div class="picture">
-                    <a href="stuff.png">
-                        <img src="stuff-x600.png">
-                    </a>
-                </div>
-            
-                <div class="separator"></div>
             
             
-                
-                
-                <div class="picture">
-                    <a href="stuff.png">
-                        <img src="stuff-x600.png">
-                    </a>
-                </div>
+            
+            <div class="picture caption">
+                <a href="stuff.png" >
+                    <img src="stuff-x600.png">
+                    
+                </a>
+            </div>
+            
+            <div class="separator"></div>
+            
+            
+            
+            
+            
+            <div class="picture caption">
+                <a href="stuff.png" >
+                    <img src="stuff-x600.png">
+                    
+                </a>
+            </div>
             
             
         </div>
-    
+        
 </section>
-  
-    
+
+        
+        
 
 <section class="full-picture" style="background: transparent url('stuff.png') no-repeat scroll center top / cover;">
     
 </section>
-  
+        
 
-  <div class="back-to-home">
-      <hr>
-      <a href="../">
-          <div id="logo" src="./../static/img/logo.svg"/>
-              HOME
-          </div>
-      </a>
-  </div>
+        
 
-  <script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
-  <script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
-  <script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
-  <script type="text/javascript" charset="utf-8">
-    $(function() {
-        baguetteBox.run(".baguette", {});
-        $(".panorama").panorama_viewer({
-            repeat: true,
-            direction: "horizontal",
-            animationTime: 150,
-            easing: "linear",
-            overlay: true
-          });
+        <div class="back-to-home">
+            <hr>
+            <a href="../">
+                <div id="logo" src="./../static/img/logo.svg"/>
+                    HOME
+                </div>
+            </a>
+        </div>
+
+        <script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
+        <script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
+        <script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
+        <script type="text/javascript" charset="utf-8">
+$(function() {
+    baguetteBox.run(".baguette", {});
+    $(".panorama").panorama_viewer({
+        repeat: true,
+        direction: "horizontal",
+        animationTime: 150,
+        easing: "linear",
+        overlay: true
     });
-  </script>
-  <footer>
-      <p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
-  </footer>
-</body>
+});
+        </script>
+
+        
+
+
+<footer>
+    <p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
+</footer>
+
+    </body>
 </html>
\ No newline at end of file
diff --git a/example/build/index.html b/example/build/index.html
index 63ee36c..200e345 100644
--- a/example/build/index.html
+++ b/example/build/index.html
@@ -1,29 +1,28 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="UTF-8">
-  
+    <head>
+        <meta charset="UTF-8">
+        
 <link type="text/css" rel="stylesheet" href="static/css/fonts.css"  media="screen,projection"/>
 <link type="text/css" rel="stylesheet" href="static/css/style.css"  media="screen,projection"/>
 
+        <!--Let browser know website is optimized for mobile-->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <title>Example gallery</title>
+    </head>
 
-  <!--Let browser know website is optimized for mobile-->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Example gallery</title>
-</head>
+    <body>
 
-<body>
-
-  <div class="gallery-header">
-      
+        <div class="gallery-header">
+            
 <img id="logo" src="static/img/logo.svg" />
 
-      <h1>Example gallery</h1>
-      <h4>The subtitle</h4><hr>
-      </div>
+            <h1>Example gallery</h1>
+            <h4>The subtitle</h4><hr>
+            </div>
 
 
-  
+        
 <div class="galleries-grid">
   
   <div class="galleries-line covers-1">
@@ -33,7 +32,7 @@
         <div class="gallery-title">
           <h2>my first gallery</h2>
           <h3>some subtitle</h3>
-          
+          <div class="gallery-datetime">08 December 2015</div>
           
         </div>
       </a>
@@ -48,8 +47,12 @@
 <p style="visibility: hidden">.</p>
 
 
-  <footer>
-      <p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
-  </footer>
-</body>
+        
+
+
+<footer>
+    <p>Generated using <a href="https://github.com/psycojoker/prosopopee">Prosopopée</a> · content under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> · atom logo by <a href="https://thenounproject.com/jjjon/">Jonathan Li</a> under <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a></p>
+</footer>
+
+    </body>
 </html>
\ No newline at end of file
diff --git a/example/build/static/css/style-page.css b/example/build/static/css/style-page.css
index 60470c5..cedb963 100644
--- a/example/build/static/css/style-page.css
+++ b/example/build/static/css/style-page.css
@@ -8,6 +8,7 @@ body {
     height: 100%;
     width: 100%;
     background-color: #FBFBFB;
+    color: black;
     margin: 0;
 }
 
@@ -103,7 +104,6 @@ a {
     line-height: 1.8em;
     margin-left: 21%;
     margin-right: 21%;
-    color: black;
 }
 
 .paragraph {
@@ -112,7 +112,6 @@ a {
     font-size: 1em;
     margin-left: 21%;
     margin-right: 21%;
-    color: #333;
 }
 
 .paragraph h2 {
@@ -120,7 +119,6 @@ a {
     font-weight: normal;
     font-size: 2.5em;
     text-transform: uppercase;
-    color: black;
     line-height: 1.4em;
 }
 
@@ -148,7 +146,6 @@ footer {
 
 .back-to-home hr {
     width: 14%;
-    margin-top: 8em;
     color: #DDD;
 }
 
@@ -197,3 +194,145 @@ footer a {
 .gallery-header {
     margin-bottom: 0;
 }
+
+
+
+.caption {
+    position: relative;
+    overflow: hidden;
+}
+
+.caption__media {
+    display: block;
+    min-width: 100%;
+    max-width: 100%;
+    height: auto;
+}
+
+.caption__overlay {
+    height: 20px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 20px 0 30px 0;
+    color: white;
+    transform: translateY(-100%);
+    transition: transform .35s ease-out;
+    background: -moz-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.85)), color-stop(100%, transparent));
+    background: -webkit-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%);
+    background: -o-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%);
+    background: -ms-linear-gradient(top, rgba(0,0,0,0.85) 0%, transparent 100%);
+}
+
+.caption:hover .caption__overlay {
+    transform: translateY(0);
+}
+
+.caption h5 {
+    position: relative;
+    width: auto;
+    display: inline-block;
+    margin: 0 auto 10px auto;
+    font-size: 20px;
+    font-family: "adobe-garamond-pro", serif;
+    font-weight: normal;
+    font-style: italic;
+    padding: 2px 20px;
+    width: 100%;
+    text-align: center;
+}
+
+.bordered-picture .caption__overlay {
+    margin-left: 11.5%;
+    margin-right: 11.5%;
+}
+
+.center, .center-align {
+  text-align: center;
+}
+
+
+.share, .author {
+    text-align: center;
+    height: auto;
+    position: relative;
+    bottom: 0;
+    padding: 0 0 10px 0;
+    font-family: 'crimson', serif;
+}
+
+
+ul.icon {
+   padding: 0;
+   margin: 10px 0 0 0;
+}
+
+ul.icon li {
+  padding: 0;
+  list-style-type: none;
+  display:inline-block;
+}
+
+ul.icon a {
+    display: block;
+    float: left;
+    background: url(../img/social-share.png) no-repeat;
+    background-size: 196px 23px;
+    border: none;
+}
+
+ul.icon li, ul.icon a {
+    width: 32px;
+    height: 32px;
+    text-indent: -999999em;
+    overflow: hidden;
+    list-style-type: none;
+    display: inline-block;
+}
+
+a.twitter {
+    background-position: 5px 0 !important;
+}
+
+a.facebook {
+    background-position: -57px 0 !important;
+}
+
+a.pinterest {
+    background-position: -114px 0 !important;
+}
+
+a.google {
+    background-position: -172px 0 !important;
+}
+
+.author img.circle {
+    border-radius: 50%;
+    width: 80px;
+}
+
+.author {
+    padding-bottom: 7em;
+}
+
+.author-meta {
+    color: #ccc;
+    font-style: italic;
+    font-size: 19px;
+}
+
+.author h4 {
+    text-transform: uppercase;
+}
+.author .desc {
+    width: 350px;
+    margin: auto;
+    padding-bottom: 10px;
+    font-style: normal;
+    font-size: 14px;
+    line-height: normal;
+    color: #333;
+}
