I am attempting to tag some divs onto an image that remains in the correct position as the window size changes.
My current setup is somewhat functional, but the markers only stay aligned with the image until it loses height. How can I modify my code to ensure the markers always remain attached to the image?
You can clearly observe this behavior by running the code in full-screen mode.
.container-fluid {
padding: 5%;
background-color: #EDEDED;
}
img {
display: block;
width: 60%;
}
.marker {
position: absolute;
width: 35px;
height: 35px;
border-radius: 50%;
color: white;
background-color: rgba(0,0,0,.5);
text-align: center;
padding-top: 4px;
display: table-cell;
vertical-align: middle;
&::after {
padding: 5px 10px;
position: absolute;
top: -2px;
left: -2px;
border-radius: 10px;
background-color: rgba(0,0,0);
display: none;
content: attr(data-after-content);
width: 150px;
color: white;
font-family: "Zuric Light";
}
&:hover::after {
display: block;
}
}
.marker-one {
left: 43%;
top: 12%;
}
.marker-two {
left: 61%;
top: 39%;
}
.marker-three {
left: 49%;
top: 61%;
}
.marker-four {
left: 55%;
top: 77%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid position-relative min-vh-100 d-flex justify-content-center">
<img src="https://firebasestorage.googleapis.com/v0/b/projektarbeit-interstuhl.appspot.com/o/pure%2Fpure_back_full_red.png?alt=media&token=02cac375-3340-4bc6-bbed-6ada0614a3f9" alt="Pure" class="align-self-center">
<div class="marker marker-one" data-after-content="Info">
+
</div>
<div class="marker marker-two" data-after-content="Info">
+
</div>
<div class="marker marker-three" data-after-content="Info">
+
</div>
<div class="marker marker-four" data-after-content="Info">
+
</div>
</div>