KBlueLeaf commited on
Commit
a9dd4c2
1 Parent(s): e2c1712

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +29 -21
README.md CHANGED
@@ -25,20 +25,22 @@ join us: https://discord.gg/tPBsKDyRR5
25
  .image-container {position: relative;width: 100%;height: 50vh;margin: 1rem 1rem 0 0;}
26
  .inner-container {position: absolute;width:100%;height: 100%;display: flex;align-items: center;justify-content: center;}
27
  .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;}
28
- #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),#image10:checked ~ .image-container img:nth-child(10) {height: auto; width:auto; opacity: 1;}
29
- #image1l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02062.jpg");}
30
- #image2l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02081.jpg");}
31
- #image3l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02082.jpg");}
32
- #image4l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02083.jpg");}
33
- #image5l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02084.jpg");}
34
- #image6l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02085.jpg");}
35
- #image7l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02086.jpg");}
36
  #image8l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02088.jpg");}
37
- #image9l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02089.jpg");}
38
- #image10l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02091.jpg");}
 
 
39
  </style>
40
  <div class="image-viewer">
41
- <input type="radio" id="image1" name="image-switcher">
42
  <label for="image1" id="image1l"></label>
43
  <input type="radio" id="image2" name="image-switcher">
44
  <label for="image2" id="image2l"></label>
@@ -56,20 +58,26 @@ join us: https://discord.gg/tPBsKDyRR5
56
  <label for="image8" id="image8l"></label>
57
  <input type="radio" id="image9" name="image-switcher">
58
  <label for="image9" id="image9l"></label>
59
- <input type="radio" id="image10" name="image-switcher" checked>
60
  <label for="image10" id="image10l"></label>
 
 
 
 
61
  <div class="image-container">
62
  <div class="inner-container">
63
- <img src="sample-images/02062.jpg" alt="image1" />
64
- <img src="sample-images/02081.jpg" alt="image2" />
65
- <img src="sample-images/02082.jpg" alt="image3" />
66
- <img src="sample-images/02083.jpg" alt="image4" />
67
- <img src="sample-images/02084.jpg" alt="image5" />
68
- <img src="sample-images/02085.jpg" alt="image6" />
69
- <img src="sample-images/02086.jpg" alt="image7" />
70
  <img src="sample-images/02088.jpg" alt="image8" />
71
- <img src="sample-images/02089.jpg" alt="image9" />
72
- <img src="sample-images/02091.jpg" alt="image10" />
 
 
73
  </div>
74
  </div>
75
  </div>
 
25
  .image-container {position: relative;width: 100%;height: 50vh;margin: 1rem 1rem 0 0;}
26
  .inner-container {position: absolute;width:100%;height: 100%;display: flex;align-items: center;justify-content: center;}
27
  .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;}
28
+ #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),#image10:checked ~ .image-container img:nth-child(10),#image11:checked ~ .image-container img:nth-child(11),#image12:checked ~ .image-container img:nth-child(12) {height: auto; width:auto; opacity: 1;}
29
+ #image1l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/00015-3807569455.jpg");}
30
+ #image2l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/00096-1093286410.jpg");}
31
+ #image3l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/00117-2417076749.jpg");}
32
+ #image4l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/00118-2417076750.jpg");}
33
+ #image5l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/00123-2659559372.jpg");}
34
+ #image6l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/01_2085.jpg");}
35
+ #image7l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02082.jpg");}
36
  #image8l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02088.jpg");}
37
+ #image9l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02091.jpg");}
38
+ #image10l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/02_02084.jpg");}
39
+ #image11l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/03_02086.jpg");}
40
+ #image12l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/04_02081.jpg");}
41
  </style>
42
  <div class="image-viewer">
43
+ <input type="radio" id="image1" name="image-switcher" checked>
44
  <label for="image1" id="image1l"></label>
45
  <input type="radio" id="image2" name="image-switcher">
46
  <label for="image2" id="image2l"></label>
 
58
  <label for="image8" id="image8l"></label>
59
  <input type="radio" id="image9" name="image-switcher">
60
  <label for="image9" id="image9l"></label>
61
+ <input type="radio" id="image10" name="image-switcher">
62
  <label for="image10" id="image10l"></label>
63
+ <input type="radio" id="image11" name="image-switcher">
64
+ <label for="image11" id="image11l"></label>
65
+ <input type="radio" id="image12" name="image-switcher">
66
+ <label for="image12" id="image12l"></label>
67
  <div class="image-container">
68
  <div class="inner-container">
69
+ <img src="sample-images/00015-3807569455.jpg" alt="image1" />
70
+ <img src="sample-images/00096-1093286410.jpg" alt="image2" />
71
+ <img src="sample-images/00117-2417076749.jpg" alt="image3" />
72
+ <img src="sample-images/00118-2417076750.jpg" alt="image4" />
73
+ <img src="sample-images/00123-2659559372.jpg" alt="image5" />
74
+ <img src="sample-images/01_2085.jpg" alt="image6" />
75
+ <img src="sample-images/02082.jpg" alt="image7" />
76
  <img src="sample-images/02088.jpg" alt="image8" />
77
+ <img src="sample-images/02091.jpg" alt="image9" />
78
+ <img src="sample-images/02_02084.jpg" alt="image10" />
79
+ <img src="sample-images/03_02086.jpg" alt="image11" />
80
+ <img src="sample-images/04_02081.jpg" alt="image12" />
81
  </div>
82
  </div>
83
  </div>