Update README.md
Browse files
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/
|
30 |
-
#image2l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/
|
31 |
-
#image3l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/
|
32 |
-
#image4l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/
|
33 |
-
#image5l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/
|
34 |
-
#image6l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/
|
35 |
-
#image7l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/
|
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/
|
38 |
-
#image10l{background-image: url("/KBlueLeaf/Kohaku-XL-Zeta/resolve/main/sample-images/
|
|
|
|
|
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"
|
60 |
<label for="image10" id="image10l"></label>
|
|
|
|
|
|
|
|
|
61 |
<div class="image-container">
|
62 |
<div class="inner-container">
|
63 |
-
<img src="sample-images/
|
64 |
-
<img src="sample-images/
|
65 |
-
<img src="sample-images/
|
66 |
-
<img src="sample-images/
|
67 |
-
<img src="sample-images/
|
68 |
-
<img src="sample-images/
|
69 |
-
<img src="sample-images/
|
70 |
<img src="sample-images/02088.jpg" alt="image8" />
|
71 |
-
<img src="sample-images/
|
72 |
-
<img src="sample-images/
|
|
|
|
|
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>
|