KBlueLeaf commited on
Commit
484dc44
·
verified ·
1 Parent(s): fb2272c

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +11 -21
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
- <input type="radio" id="image1" name="image-switcher" checked>
49
  <label for="image1" id="image1l"></label>
50
- <input type="radio" id="image2" name="image-switcher" checked>
51
  <label for="image2" id="image2l"></label>
52
- <input type="radio" id="image3" name="image-switcher" checked>
53
  <label for="image3" id="image3l"></label>
54
- <input type="radio" id="image4" name="image-switcher" checked>
55
  <label for="image4" id="image4l"></label>
56
- <input type="radio" id="image5" name="image-switcher" checked>
57
  <label for="image5" id="image5l"></label>
58
- <input type="radio" id="image6" name="image-switcher" checked>
59
  <label for="image6" id="image6l"></label>
60
- <input type="radio" id="image7" name="image-switcher" checked>
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" checked>
65
  <label for="image9" id="image9l"></label>
66
- <div class="image-container">
67
- <img src="sample-images/02062.jpg" alt="image1" />
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