0

I am trying to superpose images on top of each other inside of a list. One of the images will change depending on in which row it is.

So far, I have been able to move them and look how I want, but I am having two problems:

  1. The row is not containing the images (meaning that they are overlapping with subsequent rows)
  2. When I am resizing the window, the desired positioning is altered (makes sense since the images size change)

This is what I have so far:

<div class="container">
    <div class="row">
        <div class="col-2">
            <div class="imageContainer"/>
              <img src="http://placehold.it/300x300" id="picture1" />
              <img src="http://placehold.it/200x200" id="picture2"/>
            </div>
        </div>
        <div class="col-8">
            Some text
        </div>
        <div class="col-2">
            Some more text
        </div>
    </div>
</div>

With this stylesheet:

.imageContainer{
    position:relative;
    top:0px;
    left:0px;
}

.picture1{
    position:absolute;
    /*hat size=128px*/
    top:60px;
    z-index:3;
}
.picture2{

    position:absolute;
    top: 0px;
    left:20px;
    z-index:2;
}

Now, if I add a blank image (width=0) after the image container, and I give it the expected height, I am able to solve the first issue. However, if the window is resized, they might not be contained anymore.

What I am trying to achieve is similar to having a picture of a person and a picture of glasses, and trying to put the glasses on top of the person's face (assuming eyes and face are always in the same position in photo).

havan
  • 164
  • 2
  • 11
  • Possible duplicate of https://stackoverflow.com/questions/5130374/positioning-and-overlaying-image-on-another-image – James Whiteley Mar 23 '18 at 16:04
  • I disagree. I did look at [this example](https://stackoverflow.com/questions/35197899/how-to-put-image-over-image-in-bootstrap), and I am able to move the image around. The problem that I am facing, is that I move the image down, and it is furthen down than the size of the container div. I want the whole row to increase its height to contain the image. – havan Mar 23 '18 at 16:11
  • The code has some issues. Can you clean it up and clarify the question? Wouldn't you want the smaller image to overlay the larger image? – Carol Skelly Mar 25 '18 at 12:30
  • Not sure what the issues are, this works out fine when I run it in my computer. Exactly, I want the smaller image (a hat) to be on top of the bigger image, and shift it so that they're both inside of the row. I am able to put the smaller image on top of the bigger, but they are outside of the row. Also, for now, I have solved it by merging the images before sending them to the UI/html. – havan Mar 25 '18 at 14:18

0 Answers0