added captions & lightbox to project page

web/themes/custom/leshed/assets/scss/main.scss

@@ -265,7 +265,12 @@ div.layout.layout--twocol-section--50-50{
   }
 }
 
-
+//   ____            _      _
+//  |  _ \ _ __ ___ (_) ___| |_
+//  | |_) | '__/ _ \| |/ _ \ __|
+//  |  __/| | | (_) | |  __/ |_
+//  |_|   |_|  \___// |\___|\__|
+//                |__/
 article.node-type-projet.view-mode-full{
   div.cols{
     display: flex;
@@ -309,20 +314,66 @@ article.node-type-projet.view-mode-full{
         display: flex;
         .field_images{
           flex: 1;
-        }
-        img{
-          max-width: 100%;
-          height: auto;
-        }
-        // Empilement "cartes" : chaque image se fige au même endroit (haut) et
-        // est recouverte par la suivante (l'ordre du DOM fait que la dernière
-        // passe au-dessus). La 1re image ne bouge pas. Desktop uniquement.
-        @media (min-width: 768px){
-          .field_images .field-item{
-            position: sticky;
-            top: 0;
+          // .field-items{
+            &:after{
+              display: block;
+              position: relative;
+              content: "";
+              // border: 1px solid red;
+              width: 100%;
+              height: 100vh;
+            }
+          // }
+          .field-item{
+            position: relative;
+            // Empilement "cartes" : chaque image se fige au même endroit (haut) et
+            // est recouverte par la suivante (l'ordre du DOM fait que la dernière
+            // passe au-dessus). La 1re image ne bouge pas. Desktop uniquement.
+            @media (min-width: 768px){
+              position: sticky;
+              top: 0;
+              // &:last-child:after{
+              //   content: "";
+              //   // position: relative;
+              //   display:block;
+              //   // blockquote.image-field-caption{
+              //   height: 100vh;
+              //   width:100%;
+              //   border: 1px solid red;
+              //   // }
+              // }
+            }
+
+            img{
+              width: 100%;
+              max-width: 100%;
+              height: auto;
+            }
+            blockquote.image-field-caption{
+              margin: 0;
+              position: absolute;
+              bottom: 0; left: 0;
+              width: 100%;
+              background-color: rgba(0,0,0,0.65);
+              color: #fff;
+              p{
+                margin: 0;
+                padding: 1em;
+                font-weight: 300;
+                font-size: 0.8em;
+              }
+              opacity: 0;
+              transition: opacity 0.3s ease-in-out;
+            }
+            &:hover{
+              blockquote.image-field-caption{
+                opacity: 1;
+              }
+            }
           }
+
         }
+
       }
     }
   }