Update README.md
Browse files
README.md
CHANGED
@@ -16,24 +16,15 @@ join us: https://discord.gg/tPBsKDyRR5
|
|
16 |
|
17 |
![image/png](https://cdn-uploads.huggingface.co/production/uploads/630593e2fca1d8d92b81d2a1/rUeUdKYiUfi6LtTcpasgN.png)
|
18 |
|
19 |
-
|
20 |
<style>
|
21 |
.image-viewer {position: relative;width: 100%;margin: 0 auto;display: flex;flex-flow: wrap;align-items: center;justify-content: center;}
|
22 |
-
|
23 |
.image-viewer input[type="radio"] {display: none;}
|
24 |
-
|
25 |
.image-viewer label {padding: 18px;background-color: #B398F5;background-size: cover;background-position: center;border: 1px solid #ccc;cursor: pointer;color: black;margin: 9px;}
|
26 |
-
|
27 |
.image-viewer label:hover {background-color: #4C88F5;padding: 21px;margin: 6px;}
|
28 |
-
|
29 |
.image-viewer input[type="radio"]:checked + label {background-color: #6296F5;padding: 27px;margin: 0px;}
|
30 |
-
|
31 |
.image-container {position: relative;width: 100%;height: 50vh;}
|
32 |
-
|
33 |
.image-container img {position: absolute;top: 0;left: 0;height: 100%;width: 100%;object-fit: contain;opacity: 0;transition: opacity 0.5s ease;}
|
34 |
-
|
35 |
#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;}
|
36 |
-
|
37 |
#image1l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02062.jpg");}
|
38 |
#image2l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02081.jpg");}
|
39 |
#image3l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02082.jpg");}
|
@@ -45,26 +36,26 @@ join us: https://discord.gg/tPBsKDyRR5
|
|
45 |
#image9l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02089.jpg");}
|
46 |
</style>
|
47 |
<div class="image-viewer">
|
48 |
-
|
49 |
<label for="image1" id="image1l"></label>
|
50 |
-
<input type="radio" id="image2" name="image-switcher"
|
51 |
<label for="image2" id="image2l"></label>
|
52 |
-
<input type="radio" id="image3" name="image-switcher"
|
53 |
<label for="image3" id="image3l"></label>
|
54 |
-
<input type="radio" id="image4" name="image-switcher"
|
55 |
<label for="image4" id="image4l"></label>
|
56 |
-
<input type="radio" id="image5" name="image-switcher"
|
57 |
<label for="image5" id="image5l"></label>
|
58 |
-
<input type="radio" id="image6" name="image-switcher"
|
59 |
<label for="image6" id="image6l"></label>
|
60 |
-
<input type="radio" id="image7" name="image-switcher"
|
61 |
<label for="image7" id="image7l"></label>
|
62 |
<input type="radio" id="image8" name="image-switcher" checked>
|
63 |
<label for="image8" id="image8l"></label>
|
64 |
-
<input type="radio" id="image9" name="image-switcher"
|
65 |
<label for="image9" id="image9l"></label>
|
66 |
-
|
67 |
-
|
68 |
<img src="sample-images/02081.jpg" alt="image2" />
|
69 |
<img src="sample-images/02082.jpg" alt="image3" />
|
70 |
<img src="sample-images/02083.jpg" alt="image4" />
|
@@ -73,9 +64,8 @@ join us: https://discord.gg/tPBsKDyRR5
|
|
73 |
<img src="sample-images/02086.jpg" alt="image7" />
|
74 |
<img src="sample-images/02088.jpg" alt="image8" />
|
75 |
<img src="sample-images/02089.jpg" alt="image9" />
|
76 |
-
</div>
|
77 |
</div>
|
78 |
-
|
79 |
|
80 |
|
81 |
## Highlights
|
|
|
16 |
|
17 |
![image/png](https://cdn-uploads.huggingface.co/production/uploads/630593e2fca1d8d92b81d2a1/rUeUdKYiUfi6LtTcpasgN.png)
|
18 |
|
|
|
19 |
<style>
|
20 |
.image-viewer {position: relative;width: 100%;margin: 0 auto;display: flex;flex-flow: wrap;align-items: center;justify-content: center;}
|
|
|
21 |
.image-viewer input[type="radio"] {display: none;}
|
|
|
22 |
.image-viewer label {padding: 18px;background-color: #B398F5;background-size: cover;background-position: center;border: 1px solid #ccc;cursor: pointer;color: black;margin: 9px;}
|
|
|
23 |
.image-viewer label:hover {background-color: #4C88F5;padding: 21px;margin: 6px;}
|
|
|
24 |
.image-viewer input[type="radio"]:checked + label {background-color: #6296F5;padding: 27px;margin: 0px;}
|
|
|
25 |
.image-container {position: relative;width: 100%;height: 50vh;}
|
|
|
26 |
.image-container img {position: absolute;top: 0;left: 0;height: 100%;width: 100%;object-fit: contain;opacity: 0;transition: opacity 0.5s ease;}
|
|
|
27 |
#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;}
|
|
|
28 |
#image1l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02062.jpg");}
|
29 |
#image2l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02081.jpg");}
|
30 |
#image3l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02082.jpg");}
|
|
|
36 |
#image9l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02089.jpg");}
|
37 |
</style>
|
38 |
<div class="image-viewer">
|
39 |
+
<input type="radio" id="image1" name="image-switcher">
|
40 |
<label for="image1" id="image1l"></label>
|
41 |
+
<input type="radio" id="image2" name="image-switcher">
|
42 |
<label for="image2" id="image2l"></label>
|
43 |
+
<input type="radio" id="image3" name="image-switcher">
|
44 |
<label for="image3" id="image3l"></label>
|
45 |
+
<input type="radio" id="image4" name="image-switcher">
|
46 |
<label for="image4" id="image4l"></label>
|
47 |
+
<input type="radio" id="image5" name="image-switcher">
|
48 |
<label for="image5" id="image5l"></label>
|
49 |
+
<input type="radio" id="image6" name="image-switcher">
|
50 |
<label for="image6" id="image6l"></label>
|
51 |
+
<input type="radio" id="image7" name="image-switcher">
|
52 |
<label for="image7" id="image7l"></label>
|
53 |
<input type="radio" id="image8" name="image-switcher" checked>
|
54 |
<label for="image8" id="image8l"></label>
|
55 |
+
<input type="radio" id="image9" name="image-switcher">
|
56 |
<label for="image9" id="image9l"></label>
|
57 |
+
<div class="image-container">
|
58 |
+
<img src="sample-images/02062.jpg" alt="image1" />
|
59 |
<img src="sample-images/02081.jpg" alt="image2" />
|
60 |
<img src="sample-images/02082.jpg" alt="image3" />
|
61 |
<img src="sample-images/02083.jpg" alt="image4" />
|
|
|
64 |
<img src="sample-images/02086.jpg" alt="image7" />
|
65 |
<img src="sample-images/02088.jpg" alt="image8" />
|
66 |
<img src="sample-images/02089.jpg" alt="image9" />
|
|
|
67 |
</div>
|
68 |
+
</div>
|
69 |
|
70 |
|
71 |
## Highlights
|