Update README.md

README.md

@@ -3,15 +3,8 @@ license: unknown
 ---
 
 <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;
+    font-size: 3.5em;
     text-align: center;
     color: #333;
     font-family: "lucida sans unicode", "lucida grande", sans-serif;
@@ -28,85 +21,53 @@ license: unknown
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
-  
-  .custom-table {
-    table-layout: fixed;
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 0em;
-  }
-  
-  .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;
-    /* Smooth transition for the container */
+  .image-container {
+    display: flex;
+    justify-content: center; /* Center the images */
+    gap: 10px; /* Adjust the gap between images */
+    position: relative; /* Position relative for absolute positioning of children */
   }
-  .custom-image-container:hover {
-    transform: scale(1.05);
-    /* Scale the container on hover */
+
+  .image-wrapper {
+    position: relative; /* Position relative for the wrapper */
+    overflow: visible; /* Allow overflow for scaling */
+    width: 30%; /* Set a fixed width for the wrapper */
   }
-  .custom-image {
-    width: 100%;
-    height: auto;
-    object-fit: cover;
-    border-radius: 10px;
-    transition: transform .7s;
-    margin-bottom: 0em;
+
+  .image-wrapper img {
+    width: 100%; /* Make the image fill the wrapper */
+    height: auto; /* Maintain aspect ratio */
+    transition: transform 0.3s ease; /* Smooth transition for the image */
+    position: relative; /* Position relative for z-index control */
+    z-index: 0; /* Default z-index */
+    border-radius: 15px; /* Rounded corners */
   }
-  .custom-button {
-    width: auto;
-    height: 100px;
-    object-fit: cover;
-    border-radius: 10px;
-    transition: transform .7s;
-    margin-bottom: 0em;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+
+  .image-wrapper:hover img {
+    transform: scale(1.4); /* Scale effect on hover */
+    z-index: 10; /* Bring the hovered image to the front */
   }
-    
 </style>
 <h1 class="title">
   <span>Pettanko Rouramashin PonySR v1</span>
 </h1>
-<table class="custom-table">
-  <tr>
-    <td>
-      <div class="custom-image-container">
+<div class="image-container">
+  <div class="image-wrapper">
         <img class="custom-image" src="https://huggingface.co/pettankoutei/Loras/resolve/main/PonyDiff_v6/other_samples/PonySR_v1/sample_01.png" alt="sample1">
       </div>
-    </td>
-    <td>
-      <div class="custom-image-container">
+  <div class="image-wrapper">
         <img class="custom-image" src="https://huggingface.co/pettankoutei/Loras/resolve/main/PonyDiff_v6/other_samples/PonySR_v1/sample_02.png" alt="sample2">
       </div>
-    </td>
-    <td>
-      <div class="custom-image-container">
+  <div class="image-wrapper">
         <img class="custom-image" src="https://huggingface.co/pettankoutei/Loras/resolve/main/PonyDiff_v6/other_samples/PonySR_v1/sample_03.png" alt="sample1">
-      </div>
-    </td>
-  </tr>
-</table>
-<table class="custom-table">
-  <tr>
-    <td>
-      <div class="custom-image-container">
-        <a href="https://www.buymeacoffee.com/pettankoutei" target="_blank"><img class="custom-button" src="https://huggingface.co/pettankoutei/Loras/resolve/main/bmac_button.png" alt="Buy me a cookie!" style="height: 100px;" /></a>
-      </div>
-    </td>
-  </tr>
-</table>
+  </div>
+</div>
+<div class="image-container">
+  <div class="image-wrapper">
+    <a href="https://www.buymeacoffee.com/pettankoutei" target="_blank"><img class="custom-button" src="https://huggingface.co/pettankoutei/Loras/resolve/main/bmac_button.png" alt="Buy me a cookie!" /></a>
+  </div>
+</div>
+
 
   > Support me on Buy Me a Coffee! for early access of new content and exclusive models!