Update README.md

README.md

@@ -7,6 +7,7 @@ language:
 tags:
 - text-to-image
 - stable-diffusion
+- 2D
 - safetensors
 - stable-diffusion-xl
 base_model: cagliostrolab/animagine-xl-3.1
@@ -35,13 +36,173 @@ base_model: cagliostrolab/animagine-xl-3.1
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
-  
+  .title {
+   font-size: 2.5em;
+   text-align: center;
+   color: #333;
+   font-family: 'Helvetica Neue', sans-serif;
+   text-transform: uppercase;
+   letter-spacing: 0.1em;
+   padding: 0.5em 0;
+   background: transparent;
+ }
+ 
+ .title span {
+   background: -webkit-linear-gradient(45deg, #2196f3, #f44336);
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+   font-family: 'Andale Mono', monospace;
+ }
+ 
+ .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>Raena 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/qcSogOFhjnO99hp5pL6NR.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/T3XKGPAPvnBdJX7qEasRn.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/GZ459ZfvoCPmDX4p8dROU.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/efG_LznVM2jcmkOj8Xkxr.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/QYTuT3525f1DMAu80SMIA.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/pfR1Xoe2bEDtC1QvnIPrr.png" alt="Sample Image 6">
+       <div class="overlay">
+         <div class="overlay-text">Sample Image</div>
+       </div>
+     </div>
+   </td>
+ </tr>
+</table>
+
+
 **Raena XL** is a merged model that focused in 2D Anime
 
 ## Model Details