I've been attempting to center a small image within a larger one, both of which are contained within a Bootstrap Column.
<div className="row justify-content-center my-5 ">
<div className="col-xs-10 col-sm-6 my-auto mx-auto">
<Fade left duration={1000} delay={1000} fraction={0.1} >
<div className="father">
<img height="110%" width="100%" className="img-fluid biggerImg" src="/img/edificios.jpg" alt="edificios"/>
<img src="/img/logo02.png" alt="logo" className="logo"/>
</div>
</Fade>
</div>
Here is the corresponding CSS code:
.padreImagenes{
/* background-image: url("../../assets/img/edificios.jpg"); */
text-align: center;
}
.biggerImg{
position: relative;
opacity: 0.8;
}
.logo{
position: absolute;
}
I have tried various methods such as setting the smaller image as absolute and adjusting its position using top, left, and transform/translate properties in the CSS. However, the issue arises when the site adapts to different screen sizes and the alignment gets disrupted.
Merging the two images with Photoshop is not an option for me because I want to apply a specific effect to the "smaller image."
Any suggestions or help would be greatly appreciated.