Update index.html

index.html

@@ -25,6 +25,51 @@
 color: #38488f;
 text-decoration: none;
 }
+.image-container {
+position: relative;
+display: inline-block;
+width: 300px; /* Set the desired width for both images */
+height: 300px; /* Set the desired height for both images */
+overflow: hidden;
+}
+.base-image,
+.overlay-image {
+position: absolute;
+top: 0;
+left: 0;
+width: 100%; /* The width will be 100% of the .image-container */
+height: 100%; /* The height will be 100% of the .image-container */
+object-fit: cover; /* Ensures the images maintain their aspect ratio while filling the container */
+}
+.overlay-image {
+opacity: 0;
+}
+.controls {
+display: flex;
+flex-direction: column;
+width: 100%;
+}
+.slider {
+max-width: 100%;
+margin: 20px 0;
+}
+.hidden {
+display: none;
+}
+button {
+background-color: #3a7bdb;
+color: white;
+padding: 8px 16px;
+border: none;
+border-radius: 4px;
+cursor: pointer;
+font-size: 14px;
+margin: 5px;
+}
+button:hover {
+background-color: #2669c7;
+}
+
 @media (max-width: 700px) {
 main {
 margin: 0 auto;