Looking for a way to stack two images precisely on top of each other.
However, the top image (the circle) keeps moving around unpredictably.
Both images are within a responsive grid setup and the base image should always remain centered.
Let's say we want to focus on the hip for instance. Check out the images: https://i.sstatic.net/6FPpn.jpg
When I resize the page, the right image shifts down as intended, but the circle ends up elsewhere (like on the hand). Take a look at the images here: https://i.sstatic.net/4iOmL.jpg
This is the code I'm using:
/* No-margins Class Rules */
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters>[class^="col-"],
.row.no-gutters>[class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
/* Centers content */
.centered-img {
display: flex;
align-items: center;
justify-content: center;
min-width: 100px;
}
.img-container {
background-color: yellow;
position: relative;
width: 100%;
height: 100%;
display: flex;
}
.test {
position: absolute;
transform: translate(-50%, -50%);
left: 100px;
}<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
</head>
<body>
<div class="container">
<!-- global canvas -->
<div class="row no-gutters">
<div class="col-sm">
<div class="centered-img">
<img src="./images/fssFront.png" class="img-fluid" alt="Responsive image">
<img src="./images/circle.png" class="test" alt="Responsive image">
</div>
</div>
<div class="col-sm">
<div class="centered-img">
<img src="./images/fssBack.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<!-- global canvas -->
</body>
</html>Any suggestions on how to keep the red circle consistently aligned with the man regardless of page size changes?
Your help is greatly appreciated in advance.