Added preivew images

README.md

@@ -35,13 +35,154 @@ base_model: cagliostrolab/animagine-xl-3.1
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
-  
+
+  .custom-table {
+   table-layout: fixed;
+   width: 100%;
+   border-collapse: collapse;
+   margin-top: 2em;
+ }
+ 
+ .custom-table td {
+   width: 50%;
+   vertical-align: top;
+   padding: 10px;
+   box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
+ }
+
+ .custom-image-container {
+   position: relative;
+   width: 100%;
+   margin-bottom: 0em;
+   overflow: hidden;
+   border-radius: 10px;
+   transition: transform .7s; 
+ }
+
+ .custom-image-container:hover {
+   transform: scale(1.05); 
+ }
+
+ .custom-image {
+   width: 100%;
+   height: auto;
+   object-fit: cover;
+   border-radius: 10px;
+   transition: transform .7s;
+   margin-bottom: 0em;
+ }
+
+ .nsfw-filter {
+   filter: blur(8px); 
+   transition: filter 0.3s ease; 
+ }
+
+ .custom-image-container:hover .nsfw-filter {
+   filter: none; 
+ }
+ 
+ .overlay {
+   position: absolute;
+   bottom: 0;
+   left: 0;
+   right: 0;
+   color: white;
+   width: 100%;
+   height: 40%;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+   font-size: 1vw;
+   font-style: bold;
+   text-align: center;
+   opacity: 0; 
+   background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0) 100%);
+   transition: opacity .5s;
+ }
+
+ .custom-image-container:hover .overlay {
+   opacity: 1; 
+ }
+
+ .overlay-text {
+   background: linear-gradient(45deg, #7ed56f, #28b485);
+   -webkit-background-clip: text;
+   color: transparent; 
+   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
+ }
+
+ .overlay-subtext {
+   font-size: 0.75em;
+   margin-top: 0.5em;
+   font-style: italic;
+ }
+   
+ .overlay,
+ .overlay-subtext {
+   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+ }
 </style>
 
 <h1 class="title">
   <span>Raemu XL</span>
 </h1>
 
+<table class="custom-table">
+ <tr>
+   <td>
+     <div class="custom-image-container">
+       <img class="custom-image" src="https://cdn-uploads.huggingface.co/production/uploads/64b24543eec33e27dc9a6eca/obp1kCabBf94rBIC9acHE.png" alt="Sample Image 1">
+       <div class="overlay">
+         <div class="overlay-text">Sample Image</div>
+       </div>
+     </div>
+   </td>
+   <td>
+     <div class="custom-image-container">
+       <img class="custom-image" src="https://cdn-uploads.huggingface.co/production/uploads/64b24543eec33e27dc9a6eca/1Bt9u5eTutKoq7IcYW6hr.png" alt="Sample Image 2">
+       <div class="overlay">
+         <div class="overlay-text">Sample Image</div>
+       </div>
+     </div>
+   </td>
+   <td>
+     <div class="custom-image-container">
+       <img class="custom-image" src="https://cdn-uploads.huggingface.co/production/uploads/64b24543eec33e27dc9a6eca/axIYI4IfGIUibEY7Uk9EC.png" alt="Sample Image 3">
+       <div class="overlay">
+         <div class="overlay-text">Sample Image</div>
+       </div>
+     </div>
+   </td>
+ </tr>
+ <tr>
+   <td>
+     <div class="custom-image-container">
+       <img class="custom-image" src="https://cdn-uploads.huggingface.co/production/uploads/64b24543eec33e27dc9a6eca/1JbzlFalbYu6Bsp25N9N5.png" alt="Sample Image 4">
+       <div class="overlay">
+         <div class="overlay-text">Sample Image</div>
+       </div>
+     </div>
+   </td>
+   <td>
+     <div class="custom-image-container">
+       <img class="custom-image" src="https://cdn-uploads.huggingface.co/production/uploads/64b24543eec33e27dc9a6eca/MTweqSnjw0wIpFaaNI6_U.png" alt="Sample Image 5">
+       <div class="overlay">
+         <div class="overlay-text">Sample Image</div>
+       </div>
+     </div>
+   </td>
+   <td>
+     <div class="custom-image-container">
+       <img class="custom-image" src="https://cdn-uploads.huggingface.co/production/uploads/64b24543eec33e27dc9a6eca/Os-_lyzIgB4n5M5WyawLT.jpeg" alt="Sample Image 6">
+       <div class="overlay">
+         <div class="overlay-text">Sample Image</div>
+       </div>
+     </div>
+   </td>
+ </tr>
+</table>
+
 **Raemu XL** is a merged model that focused in 2.5D Anime
 
 ## Model Details