Center Image Over Image Responsive site-CodePudding

I am trying to position a small image in the center of a bibber one. Both images are inside 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>

And this is the css.

.padreImagenes{
/* background-image: url("../../assets/img/edificios.jpg"); */
text-align: center;
}

.biggerImg{
    position: relative;
    opacity: 0.8; 
     
}

.logo{

    position: absolute;
/*     position: absolute;
    transform: translate(-200%, 70%); */
/*     position: absolute;
    top: 60px;
    left: 80px; */
}

As you can see in commented CSS code, I have tried setting the smaller image as absolute, and playing around with top, left, even transform/translate. The problem is that, when the site adapts to user screen size, It does not remain centered.

Combining both images with photoshop is not an option, since I want to apply an effect to the "smaller image".

Thanks,

CodePudding user response：

try:

.logo {
    position: absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}

div {position:relative; display:inline-block;}
img {display:block;}
.logo {
    position: absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}

<div>
  <img src="https://www.kurzweilai.net/images/Naam-Limits-of-Earth-Part1-001-earth-600x600.jpg" alt="">
  <img src="https://blogs.salleurl.edu/sites/default/files/blogs/emprendedores/chrome_hacked_Pwnium-300x300.jpg" alt="" class="logo">
</div>

CodePudding user response：

You can set the images container to display: flex and use the flex attributes to center the elements.

However, I haven't tested it with bootstrap, so there might be some styles conflicts.

.father {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo {
  position: absolute;
}

<div class="row justify-content-center my-5 ">
  <div class="col-xs-10 col-sm-6 my-auto mx-auto">
    <div class="father">
      <img height="110%" width="100%" class="img-fluid biggerImg" src="https://picsum.photos/200/150
" alt="edificios"/>
      <img src="https://picsum.photos/100/100
" alt="logo" class="logo"/>
    </div>
  </div>