better image caption: appears only when hover the image on the bottom

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

@@ -402,19 +402,33 @@ article.node-type-projet.view-mode-full{
               //   // }
               // }
             }
-
+            figure{
+              margin: 0;
+              a{
+                display: block;
                 img{
                   width: 100%;
                   max-width: 100%;
                   height: auto;
                 }
-            blockquote.image-field-caption{
+              }
+              figcaption.image-field-caption{
                 margin: 0;
                 position: absolute;
                 bottom: 0; left: 0;
+                height: 5em;
                 width: 100%;
+                overflow: visible;
+                display: block;
+                // border: 1px solid red;
+                blockquote{
+                  position: absolute;
+                  bottom: 0; left: 0;
+                  width: 100%;
+                  margin: 0;
                   background-color: rgba(0,0,0,0.65);
                   color: #fff;
+                  pointer-events: none;
                   p{
                     margin: 0;
                     padding: 1em;
@@ -425,8 +439,8 @@ article.node-type-projet.view-mode-full{
                   transition: opacity 0.3s ease-in-out;
                 }
                 &:hover{
-              z-index:200;
+                  // z-index:200;
-              blockquote.image-field-caption{
+                  blockquote{
                     opacity: 1;
                   }
                 }
@@ -434,6 +448,14 @@ article.node-type-projet.view-mode-full{
 
             }
 
+            &:hover{
+              z-index:200;
+
+            }
+          }
+
+        }
+
       }
     }
   }

web/themes/custom/leshed/templates/image-caption-formatter.html.twig

@@ -0,0 +1,30 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a formatted image field with a caption.
+ *
+ * Available variables:
+ * - image: A collection of image data.
+ * - image_style: An optional image style.
+ * - url: An optional URL the image can be linked to.
+ * - caption : An optional image caption.
+ *
+ * @see template_preprocess_image_caption_formatter()
+ *
+ * @ingroup themeable
+ */
+#}
+<figure>
+
+  {% if url %}
+    <a href="{{ url }}">{{ image }}</a>
+  {% else %}
+    {{ image }}
+  {% endif %}
+
+  {% if caption %}
+    <figcaption  class="image-field-caption">
+      <blockquote>{{ caption }}</blockquote>
+    </figcaption>
+  {% endif %}
+</figure>