Update README.md

README.md

@@ -22,9 +22,10 @@ join us: https://discord.gg/tPBsKDyRR5
 .image-viewer label {padding: 18px;background-color: #B398F5;background-size: cover;background-position: center;border: 1px solid #ccc;cursor: pointer;color: black;margin: 9px;}
 .image-viewer label:hover {background-color: #4C88F5;padding: 21px;margin: 6px;}
 .image-viewer input[type="radio"]:checked + label {background-color: #6296F5;padding: 27px;margin: 0px;}
-.image-container {position: relative;width: 100%;height: 50vh;}
-.image-container img {position: absolute;top: 0;left: 0;height: 100%;width: 100%;object-fit: contain;opacity: 0;transition: opacity 0.5s ease;}
-#image1:checked ~ .image-container img:nth-child(1),#image2:checked ~ .image-container img:nth-child(2),#image3:checked ~ .image-container img:nth-child(3),#image4:checked ~ .image-container img:nth-child(4),#image5:checked ~ .image-container img:nth-child(5),#image6:checked ~ .image-container img:nth-child(6),#image7:checked ~ .image-container img:nth-child(7),#image8:checked ~ .image-container img:nth-child(8),#image9:checked ~ .image-container img:nth-child(9) {opacity: 1;}
+.image-container {position: relative;width: 100%;height: 50vh;margin: 1rem 1rem 0 0;}
+.inner-container {position: absolute;width:100%;height: 100%;display: flex;align-items: center;justify-content: center;}
+.inner-container img {border-radius: 10px;max-height: 100%;max-width: 100%;height: 0;width: 0;opacity: 0;transition: opacity 0.5s ease, height 0.25s ease, width 0.25s ease;}
+#image1:checked ~ .image-container img:nth-child(1),#image2:checked ~ .image-container img:nth-child(2),#image3:checked ~ .image-container img:nth-child(3),#image4:checked ~ .image-container img:nth-child(4),#image5:checked ~ .image-container img:nth-child(5),#image6:checked ~ .image-container img:nth-child(6),#image7:checked ~ .image-container img:nth-child(7),#image8:checked ~ .image-container img:nth-child(8),#image9:checked ~ .image-container img:nth-child(9) {height: auto; width:auto; opacity: 1;}
 #image1l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02062.jpg");}
 #image2l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02081.jpg");}
 #image3l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02082.jpg");}
@@ -48,13 +49,14 @@ join us: https://discord.gg/tPBsKDyRR5
 <label for="image5" id="image5l"></label>
 <input type="radio" id="image6" name="image-switcher">
 <label for="image6" id="image6l"></label>
-<input type="radio" id="image7" name="image-switcher">
+<input type="radio" id="image7" name="image-switcher" checked>
 <label for="image7" id="image7l"></label>
-<input type="radio" id="image8" name="image-switcher" checked>
+<input type="radio" id="image8" name="image-switcher">
 <label for="image8" id="image8l"></label>
 <input type="radio" id="image9" name="image-switcher">
 <label for="image9" id="image9l"></label>
 <div class="image-container">
+<div class="inner-container">
 <img src="sample-images/02062.jpg" alt="image1" />
 <img src="sample-images/02081.jpg" alt="image2" />
 <img src="sample-images/02082.jpg" alt="image3" />
@@ -66,7 +68,9 @@ join us: https://discord.gg/tPBsKDyRR5
 <img src="sample-images/02089.jpg" alt="image9" />
 </div>
 </div>
+</div>
 
+---
 
 ## Highlights
 - Resume from Kohaku-XL-Epsilon rev2