Currently, I am working on a school project that involves creating a slideshow on a webpage. However, I have reached a point where I am unsure of how to proceed. Here is the progress I have made so far:
body {
background-color: #252525;
}
#wrapper {
width: 90%;
margin: 0 auto;
padding: 2%;
}
#images {
width: 100%;
height: 300px;
text-align: center;
overflow: auto;
}
#container-1 {
display: inline-block;
background-color: #fff;
width: 100px;
height: 300px;
transition: .5s ease-in-out;
}
#container-1:hover {
background-color: #189fff;
width: 80%;
height: 300px;
}
.container {
width: 100px;
height: 300px;
background-color: #fff;
display: inline-block;
transition: .5s ease-in-out;
}
.container:hover {
background-color: #189fff;
width: 80%;
height: 300px;
}<div id="wrapper">
<div id="images">
<div id="container-1"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</div>The idea behind this design is for each image (or div) to expand when hovered, displaying the complete picture. There are two types of images - clipped and unclipped. Perhaps this division could cause some issues?
The class "container" serves as a placeholder to demonstrate the layout and provide background colors for the other divs. The current #container-1:hover setting may not align perfectly with future image sizes.
Without overflow: auto;, additional divs may get displaced below one another, which must be avoided.
The code functions somewhat according to my requirements. However, hovering over one div pushes the others aside, leading to conflicts. Is there a solution to prevent this behavior? Possibly adjusting the widths of surrounding divs while one is being hovered on?
I am new to JavaScript and still learning, so any feedback or suggestions would be greatly appreciated. Unfortunately, we are restricted from using jQuery or similar libraries.
To view a live demo, visit this fiddle: jsfiddle