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

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

@@ -402,33 +402,55 @@ article.node-type-projet.view-mode-full{
               //   // }
               // }
             }
-
-            img{
-              width: 100%;
-              max-width: 100%;
-              height: auto;
-            }
-            blockquote.image-field-caption{
+            figure{
               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;
+              a{
+                display: block;
+                img{
+                  width: 100%;
+                  max-width: 100%;
+                  height: auto;
+                }
               }
-              opacity: 0;
-              transition: opacity 0.3s ease-in-out;
+              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;
+                    font-weight: 300;
+                    font-size: 0.8em;
+                  }
+                  opacity: 0;
+                  transition: opacity 0.3s ease-in-out;
+                }
+                &:hover{
+                  // z-index:200;
+                  blockquote{
+                    opacity: 1;
+                  }
+                }
+              }
+
             }
+
             &:hover{
               z-index:200;
-              blockquote.image-field-caption{
-                opacity: 1;
-              }
+
             }
           }
 

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>