Update README.md

README.md

@@ -55,6 +55,15 @@ tags:
   .custom-image-container:hover .nsfw-filter {
     filter: none; /* Remove the blur effect on hover */
   }
+
+  .custom-image {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    border-radius: 10px;
+    transition: transform .7s, opacity .5s;
+    margin-bottom: 0em;
+  }
   
   .overlay {
     position: absolute;
@@ -111,38 +120,38 @@ tags:
     <td>
       <div class="custom-image-container">
         <div class="image-wrapper">
-          <img class="hover-image" src="https://huggingface.co/404-program-not-found/404Networks/resolve/main/Previews/Sweetbun/Sweetbun4.png" alt="sampleb1">
+          <img class="custom-image" src="https://huggingface.co/404-program-not-found/404Networks/resolve/main/Previews/Sweetbun/Sweetbun4.png" alt="sampleb1">
           <div class="overlay" style="font-size: 1vw; font-style: bold;">"A Quick Stroll" <div class="overlay-subtext" style="font-size: 0.75em; font-style: italic;">by 404-program-not-found</div></div>
         </div>
       </div>
        <div class="custom-image-container">
         <div class="image-wrapper">
-         <img class="hover-image" src="https://huggingface.co/404-program-not-found/404Networks/resolve/main/Previews/Sweetbun/Sweetbun3.png" alt="sampleb2">
+         <img class="custom-image" src="https://huggingface.co/404-program-not-found/404Networks/resolve/main/Previews/Sweetbun/Sweetbun3.png" alt="sampleb2">
          <div class="overlay" style="font-size: 1vw; font-style: bold;">"Lost in Wonder" <div class="overlay-subtext" style="font-size: 0.75em; font-style: italic;">by 404-program-not-found</div></div>
        </div>
     </td>
     <td>
       <div class="custom-image-container">
        <div class="image-wrapper">
-        <img class="hover-image" src="https://huggingface.co/404-program-not-found/404Networks/resolve/main/Previews/Sweetbun/Sweetbun9.png" alt="sampleb3">
+        <img class="custom-image" src="https://huggingface.co/404-program-not-found/404Networks/resolve/main/Previews/Sweetbun/Sweetbun9.png" alt="sampleb3">
         <div class="overlay" style="font-size: 1vw; font-style: bold;"> "Unexpected Visitor" <div class="overlay-subtext" style="font-size: 0.75em; font-style: italic;">by 404-program-not-found</div></div>
       </div>
      </div>
       <div class="custom-image-container">
        <div class="image-wrapper">
-        <img class="hover-image" src="https://huggingface.co/404-program-not-found/404Networks/resolve/main/Previews/Sweetbun/Sweetbun2.png" alt="sampleb4">
+        <img class="custom-image" src="https://huggingface.co/404-program-not-found/404Networks/resolve/main/Previews/Sweetbun/Sweetbun2.png" alt="sampleb4">
         <div class="overlay" style="font-size: 1vw; font-style: bold;"> "Urban Tranqulity" <div class="overlay-subtext" style="font-size: 0.75em; font-style: italic;">by 404-program-not-found</div></div>
     </td>
     <td>
       <div class="custom-image-container">
        <div class="image-wrapper">
-        <img class="hover-image" src="https://huggingface.co/404-program-not-found/404Networks/resolve/main/Previews/Sweetbun/Sweetbun11.png" alt="sampleb5">
+        <img class="custom-image" src="https://huggingface.co/404-program-not-found/404Networks/resolve/main/Previews/Sweetbun/Sweetbun11.png" alt="sampleb5">
         <div class="overlay" style="font-size: 1vw; font-style: bold;"> "Bear Hug" <div class="overlay-subtext" style="font-size: 0.75em; font-style: italic;">by 404-program-not-found</div></div>
       </div>
      </div>
       <div class="custom-image-container">
        <div class="image-wrapper">
-        <img class="hover-image" src="https://huggingface.co/404-program-not-found/404Networks/resolve/main/Previews/Sweetbun/Sweetbun10.png" alt="sampleb6">
+        <img class="custom-image" src="https://huggingface.co/404-program-not-found/404Networks/resolve/main/Previews/Sweetbun/Sweetbun10.png" alt="sampleb6">
         <div class="overlay" style="font-size: 1vw; font-style: bold;"> "Inaka life" <div class="overlay-subtext" style="font-size: 0.75em; font-style: italic;">"by ask"</div></div>
       </div>
     </td>
@@ -190,3 +199,4 @@ A LoRa merge based on several custom trained artist LoRas with similar art style
 - Tools
   - [**holostrawberry's lora training guide & Colabs**](https://civitai.com/models/22530)
 
+