Update README.md
Browse files
README.md
CHANGED
@@ -25,7 +25,7 @@ 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) {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");}
|
@@ -35,6 +35,7 @@ join us: https://discord.gg/tPBsKDyRR5
|
|
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 |
</style>
|
39 |
<div class="image-viewer">
|
40 |
<input type="radio" id="image1" name="image-switcher">
|
@@ -49,12 +50,14 @@ join us: https://discord.gg/tPBsKDyRR5
|
|
49 |
<label for="image5" id="image5l"></label>
|
50 |
<input type="radio" id="image6" name="image-switcher">
|
51 |
<label for="image6" id="image6l"></label>
|
52 |
-
<input type="radio" id="image7" name="image-switcher"
|
53 |
<label for="image7" id="image7l"></label>
|
54 |
<input type="radio" id="image8" name="image-switcher">
|
55 |
<label for="image8" id="image8l"></label>
|
56 |
<input type="radio" id="image9" name="image-switcher">
|
57 |
<label for="image9" id="image9l"></label>
|
|
|
|
|
58 |
<div class="image-container">
|
59 |
<div class="inner-container">
|
60 |
<img src="sample-images/02062.jpg" alt="image1" />
|
@@ -66,6 +69,7 @@ join us: https://discord.gg/tPBsKDyRR5
|
|
66 |
<img src="sample-images/02086.jpg" alt="image7" />
|
67 |
<img src="sample-images/02088.jpg" alt="image8" />
|
68 |
<img src="sample-images/02089.jpg" alt="image9" />
|
|
|
69 |
</div>
|
70 |
</div>
|
71 |
</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) {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");}
|
|
|
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">
|
|
|
50 |
<label for="image5" id="image5l"></label>
|
51 |
<input type="radio" id="image6" name="image-switcher">
|
52 |
<label for="image6" id="image6l"></label>
|
53 |
+
<input type="radio" id="image7" name="image-switcher">
|
54 |
<label for="image7" id="image7l"></label>
|
55 |
<input type="radio" id="image8" name="image-switcher">
|
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" />
|
|
|
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>
|