/* Ensure the container is responsive */ /* Basic styling for the slider */ .image-slider { position: relative; width: 100%; /* Full width */ padding-top: 95.25%; /* Aspect ratio (16:9) to maintain proportional height */ overflow: hidden; } .image-slider2 { width: 100%; max-width: 100%; position: relative; height: auto; /* Responsive height */ } /* Styling for the images */ .image-slider img { position: absolute; top: 0; left: 0; width: 100%; /* Ensure the image fills the width */ height: 100%; /* Ensure the image fills the height */ object-fit: cover; /* Ensure images cover the div without distortion */ transition: opacity 0.5s ease-in-out; } /* Show the first image by default */ .image1 { opacity: 1; z-index: 1; } /* Hide the second image */ .image2 { opacity: 0; z-index: 0; } /* On hover, hide the first image and show the second */ .image-slider:hover .image1 { opacity: 0; } .image-slider:hover .image2 { opacity: 1; z-index: 1; } /* Media queries for different screen sizes */ @media only screen and (max-width: 768px) { .image-slider { padding-top: 75%; /* Adjust aspect ratio for smaller screens */ } } @media only screen and (max-width: 480px) { .image-slider { padding-top: 100%; /* Square aspect ratio for mobile screens */ } }