Update README.md

README.md

@@ -9,84 +9,156 @@ tags:
   - stable-diffusion
 library_name: safetensors
 ---
+placeholder, ty lyn for the style (it won't look like this when I'm done no copystrike pls ty)
 
 <style>
+  .title-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* Adjust this value to position the title vertically */
+  }
+  
+  .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, #7ed56f, #28b485);
+    -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 10px 0px rgba(0,0,0,0.15);
+    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;
+    /* Smooth transition for the container */
   }
+
+  .custom-image-container:hover {
+    transform: scale(1.05);
+    /* Scale the container on hover */
+  }
+
   .custom-image {
     width: 100%;
     height: auto;
     object-fit: cover;
-    border-radius: 7px;
+    border-radius: 10px;
     transition: transform .7s;
-    margin-bottom: 1em;
+    margin-bottom: 0em;
+  }
+
+  .nsfw-filter {
+    filter: blur(8px); /* Apply a blur effect */
+    transition: filter 0.3s ease; /* Smooth transition for the blur effect */
+  }
+
+  .custom-image-container:hover .nsfw-filter {
+    filter: none; /* Remove the blur effect on hover */
   }
-  .custom-image:hover {
-    transform: scale(1.30);
+  
+  .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;
+    /* Keep the text fully opaque */
+    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;
+    /* Make the overlay always visible */
   }
-  .special-image { 
-  border-radius: 5px 40px 5px 5px;
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); /* Soft shadow effect */
-  max-width: 600px; /* Limit the maximum width of the image */
-  margin: 0 auto; /* Center the image within its container */
-  display: block; /* Remove any default inline styling */
-  transition: transform .7s, box-shadow .3s; /* Smooth transitions for hover effects */
+  .overlay-text {
+    background: linear-gradient(45deg, #7ed56f, #28b485);
+    -webkit-background-clip: text;
+    color: transparent;
+    /* Fallback for browsers that do not support this effect */
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+    /* Enhanced text shadow for better legibility */
+    
+  .overlay-subtext {
+    font-size: 0.75em;
+    margin-top: 0.5em;
+    font-style: italic;
   }
-  .special-image:hover {
-  transform: scale(1.15); /* Slightly enlarge on hover */
-  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
+    
+  .overlay,
+  .overlay-subtext {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }
-  stolen from Linaqruf readme for Animagine XL (and restolen from Amedira repo yoinkers)
+    
 </style>
 
-<p align="center", style="font-size: 3.6rem; font-weight: bold"> ∞ 218 -v2- ∞ </p>
-
-<img class="special-image" src="https://huggingface.co/Enferlain/218v2/resolve/main/images/218v2.png" alt="Title">
-
-<p align="center", style="font-size: 1.2rem; "><strong><a href="https://huggingface.co/Enferlain/218/resolve/main/218.safetensors?download=true"</a></strong> Download</p>
-
-
-
-<hr>
-
+<h1 class="title">
+</h1>
 <table class="custom-table">
   <tr>
     <td>
-      <a href="https://huggingface.co/Enferlain/218v2/blob/main/images/218v2sample3.png">
-        <img class="custom-image" src="https://huggingface.co/Enferlain/218v2/resolve/main/images/218v2sample3.png" alt="gura">
-      </a>
-    </td>
-    <td>
-      <a href="https://huggingface.co/Enferlain/218v2/blob/main/images/218v2sample5.png">
-        <img class="custom-image" src="https://huggingface.co/Enferlain/218v2/resolve/main/images/218v2sample5.png" alt="raph">
-      </a>
+      <div class="custom-image-container">
+        <img class="custom-image" src="aaa" alt="sample1">
+      </div>
+      <div class="custom-image-container">
+        <img class="custom-image" src="aaa" alt="sample4">
+      </div>
     </td>
     <td>
-      <a href="https://huggingface.co/Enferlain/218v2/blob/main/images/218v2sample8.png">
-        <img class="custom-image" src="https://huggingface.co/Enferlain/218v2/resolve/main/images/218v2sample8.png" alt="nubby">
-      </a>
+      <div class="custom-image-container">
+        <img class="custom-image" src="aaa" alt="sample2">
+      </div>
+      <div class="custom-image-container">
+        <img class="custom-image" src="aaa" alt="sample3">
     </td>
     <td>
-      <a href="https://huggingface.co/Enferlain/218v2/blob/main/images/218v2sample10.png">
-        <img class="custom-image" src="https://huggingface.co/Enferlain/218v2/resolve/main/images/218v2sample10.png" alt="218">
-      </a>
+      <div class="custom-image-container">
+        <img class="custom-image" src="aaa" alt="sample1">
+      </div>
+      <div class="custom-image-container">
+        <img class="custom-image" src="aaa" alt="sample4">
+      </div>
     </td>
   </tr>
 </table>
 
-</details>
-
-<hr>
+<p align="center", style="font-size: 3.6rem; font-weight: bold"> ∞ 218xl ∞ </p>
 
 # ∞ 218 -- 6 months later