fixed image caption #2564

src/assets/main.scss

@@ -394,13 +394,32 @@ body{
         }
 
         section.entite{
-          
           >section{
             padding-bottom: 2em;
           }
           >section.image{
-            img{
-              max-width: 100%;
+            figure{
+              // border: #333 1px solid;
+              position: relative;
+              img{
+                max-width: 100%;
+              }
+              figcaption{
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                width: 100%;
+                @include font_reponses();
+                background-color: rgba(0,0,0,0.8);
+                // opacity: 0.8;
+                color: #fff;
+                padding: 0.3em;
+                opacity: 0;
+                transition: all 0.2s ease-in-out;
+              }
+              &:hover figcaption{
+                opacity: 1;
+              }
             }
           }
           .sources{

src/components/contents/Entite.vue

@@ -43,7 +43,10 @@ export default {
 <template>
   <section class="entite">
     <section v-if="entite.image.length" class="image">
-      <img :src="entite.image[0].url" :alt="entite.image[0].alt"/>
+      <figure>
+        <img :src="entite.image[0].url" :alt="entite.image[0].alt"/>
+        <figcaption>{{ entite.image[0].alt }}</figcaption>
+      </figure>
     </section>
     <section v-if="entite.action" class="action">
         <label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
@@ -74,7 +77,10 @@ export default {
             <figure
               v-for="(image, j) in source.images"
               :key="j">
-              <img :src="image.url" :alt="image.alt"/>
+              <figure>
+                <img :src="image.url" :alt="image.alt"/>
+                <figcaption>{{ image.alt }}</figcaption>
+              </figure>
             </figure>
         </section>