31 lines
900 B
CSS
31 lines
900 B
CSS
/* style.css */
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
overflow: hidden; /* Prevent body from scrolling */
|
|
}
|
|
|
|
.image-container {
|
|
overflow: visible; /* Allow images to overflow */
|
|
width: 100vw; /* Full viewport width */
|
|
height: auto; /* Height determined by image heights */
|
|
position: relative; /* Base positioning for relative image movement */
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
position: relative; /* Relative positioning */
|
|
transform: translateX(-50%); /* Center horizontally */
|
|
transition: left 0.3s ease; /* Smooth left transition */
|
|
max-width: none; /* Prevent scaling */
|
|
}
|
|
|
|
.slider-container {
|
|
position: relative; /* Ensure sliders are positioned relative to the viewport */
|
|
width: 100%; /* Full width sliders */
|
|
z-index: 1000; /* Above images for easier access */
|
|
}
|