Update README.md

README.md

@@ -116,7 +116,7 @@ library_name: safetensors
     text-align: center;
     opacity: 0;
     /* Keep the text fully opaque */
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0) 100%);
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
     transition: opacity .5s;
   }
   .custom-image-container:hover .overlay {
@@ -151,31 +151,46 @@ library_name: safetensors
   <tr>
     <td>
       <div class="custom-image-container">
-        <img class="custom-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xlb1.png" alt="sample1">
-        <img class="hover-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xl1.png" alt="sampleb1">
-      </div>
-      <div class="custom-image-container">
-        <img class="custom-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xlb2.png" alt="sample2">
-        <img class="hover-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xll6.png" alt="sampleb2">
+        <div class="image-wrapper">
+          <img class="custom-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xlb1.png" alt="sample1">
+          <img class="hover-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xl1.png" alt="sampleb1">
+          <div class="overlay" style="font-size: 1vw; font-style: bold;"> Merry Christmas <div class="overlay-subtext" style="font-size: 0.75em; font-style: italic;">"by ziyun"</div></div>
+        </div>
       </div>
+       <div class="custom-image-container">
+        <div class="image-wrapper">
+         <img class="custom-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xlb2.png" alt="sample2">
+         <img class="hover-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xll6.png" alt="sampleb2">
+         <div class="overlay" style="font-size: 1vw; font-style: bold;"> Sunflower <div class="overlay-subtext" style="font-size: 0.75em; font-style: italic;">"by poire"</div></div>
+       </div>
     </td>
     <td>
       <div class="custom-image-container">
+       <div class="image-wrapper">
         <img class="custom-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xlb3.png" alt="sample3">
         <img class="hover-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xll5.png" alt="sampleb3">
+        <div class="overlay" style="font-size: 1vw; font-style: bold;"> Light meal <div class="overlay-subtext" style="font-size: 0.75em; font-style: italic;">"by ziyun"</div></div>
       </div>
+     </div>
       <div class="custom-image-container">
+       <div class="image-wrapper">
         <img class="custom-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xlb4.png" alt="sample4">
         <img class="hover-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xl27.png" alt="sampleb4">
+        <div class="overlay" style="font-size: 1vw; font-style: bold;"> Rice Shower <div class="overlay-subtext" style="font-size: 0.75em; font-style: italic;">"by ziyun"</div></div>
     </td>
     <td>
       <div class="custom-image-container">
+       <div class="image-wrapper">
         <img class="custom-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xlb5.png" alt="sample5">
         <img class="hover-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xl37.png" alt="sampleb5">
+        <div class="overlay" style="font-size: 1vw; font-style: bold;"> Remilia Scarlet <div class="overlay-subtext" style="font-size: 0.75em; font-style: italic;">"by ziyun"</div></div>
       </div>
+     </div>
       <div class="custom-image-container">
+       <div class="image-wrapper">
         <img class="custom-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xlb6.png" alt="sample6">
         <img class="hover-image" src="https://huggingface.co/Enferlain/218xl/resolve/main/images/218xll2.png" alt="sampleb6">
+        <div class="overlay" style="font-size: 1vw; font-style: bold;"> Y-yes? <div class="overlay-subtext" style="font-size: 0.75em; font-style: italic;">"by ask"</div></div>
       </div>
     </td>
   </tr>