I want to make a popup with a slideshow but I have a problem, I can't get the naviagtion arrows be placed inside the image container, so when the website is resized they stay in the same place.
I want to move the navigation arrows here (Purple indicating where I want them to be)
Here's what I'd like it to look like
Website showing what I have right now
HTML Fragment:
<div id="popup" class="popup hidden">
<div class="popup-content">
<span id="closePopup" class="close">×</span>
<button id="prevImage" class="nav-button"><</button>
<img id="popupImage" src="" alt="Project Image">
<button id="nextImage" class="nav-button">></button>
<div class="popup-text">
<p id="popupName"></p>
<p id="popupDescription"></p>
</div>
</div>
</div>
CSS Fragment:
/* Popup */
.popup {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: auto;
background-color: rgba(0,0,0,0.5);
}
.popup-content {
background-color: #494949;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 30px;
border-radius: 20px;
width: 70vw;
max-width: 1600px;
height: auto;
max-height: 1000px;
text-align: left;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
}
#popupImage {
width: 55%;
height: auto;
border-radius: 20px;
margin-right: 8%;
position: relative;
}
#popupName {
font-size: 3vh;
font-weight: bold;
margin-bottom: 10px;
}
#popupDescription {
font-size: 2vh;
}
/* Navigation Buttons */
.nav-button {
background-color: transparent;
border: none;
color: #fff;
font-size: 2em;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
#prevImage {
left: 1.5%;
}
#nextImage {
right: 1.5%;
}
Similar to how you placed the popup name and description into a containing div
element, you can place the next/prev buttons and image into another div
container and absolutely position the buttons relative to it instead of the overall content container.
Example:
<div id="popup" class="popup hidden">
<div class="popup-content">
<span id="closePopup" class="close">×</span>
<div id="image-container">
<button id="prevImage" class="nav-button"><</button>
<img
id="popupImage"
src="...."
alt="Project Image"
/>
<button id="nextImage" class="nav-button">></button>
</div>
<div class="popup-text">
<p id="popupName">....</p>
<p id="popupDescription">....</p>
</div>
</div>
</div>
...
.popup-content {
color: #dddddd;
background-color: #494949;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 30px;
border-radius: 20px;
width: 70vw;
max-width: 1600px;
height: auto;
max-height: 1000px;
text-align: left;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
gap: 8%; /* <-- add "padding" here */
}
...
#popupImage {
border-radius: 20px;
/* margin-right: 8%; remove */
position: relative;
}
...
#image-container {
height: auto;
position: relative;
}
...
Note that because I don't have your complete HTML and CSS I had to omit, or change, some of image CSS to get it to render nicely in isolation. You may need to tweak your CSS styling a bit more as well.