Update README.md

README.md

@@ -25,6 +25,10 @@ tags:
   position: relative;
   width: 100%;
   margin: 0 auto;
+  display: flex;
+  flex-flow: wrap;
+  align-items: center;
+  justify-content: center;
 }
 
 .image-viewer input[type="radio"] {
@@ -34,18 +38,24 @@ tags:
 .image-viewer label {
   padding: 10px 20px;
   background-color: #B398F5;
+  background-size: cover;
   border: 1px solid #ccc;
   cursor: pointer;
-  transition: background-color 0.3s ease;
-  color: black
+  transition: 0.3s ease;
+  color: black;
+  margin: 10px;
 }
 
 .image-viewer label:hover {
   background-color: #4C88F5;
+  padding: 15px 25px;
+  margin: 5px;
 }
 
 .image-viewer input[type="radio"]:checked + label {
   background-color: #6296F5;
+  padding: 20px 30px;
+  margin: 0px;
 }
 
 .image-container {
@@ -59,7 +69,7 @@ tags:
   top: 0;
   left: 0;
   height: 100%;
-  max-width: 100%;
+  width: 100%;
   object-fit: contain;
   opacity: 0;
   transition: opacity 0.5s ease;
@@ -71,10 +81,20 @@ tags:
 #image3:checked ~ .image-container img:nth-child(3) {
   opacity: 1;
 }
+
+#image1l{
+  background-image: url("output-samples/01549.png");
+}
+#image2l{
+  background-image: url("output-samples/01550.png");
+}
+#image3l{
+  background-image: url("output-samples/01551.png");
+}
 </style>
 <div class="image-viewer">
   <input type="radio" id="image1" name="image-switcher" checked>
-  <label for="image1">1</label>
+  <label for="image1" id="image1l">1</label>
   <input type="radio" id="image2" name="image-switcher">
   <label for="image2">2</label>
   <input type="radio" id="image3" name="image-switcher">