bootstrap3:/ two images responsive together

Question

with Bosstrap3/. I have 2 image. One image is big. another is small.

both of image are responsive.

I want put small image on big image.

It's easy for a static page. But I want do it for a responsive page.

I want position of images not be change with resize of page.

I try this:

<div class="container">

<div class=" panel panel-default">
    <div class="panel-body" style="padding:1px">
        <img class="img-responsive" src="http://placehold.it/1170x300" alt="Chania">
    </div>
    <div class="panel-footer">
        <a href="#" class="pull-right">View all</a> <h4>Bootply Editor &amp; Code Library</h4>
    </div>
</div>
</div>

<img class="img-responsive mytumb" src="http://placehold.it/150x150/000">

AND css code:

.mytumb{
  position:absolute;
  top:50px;
  left:40px;

}

But it works for an static page.

How can I do it?

https://jsfiddle.net/DTcHh/18935/

Answer 1

You can add your image inside your .container div so it is in absolute position relative to this container.

Like this

And then, play with media queries to make it fits everytime.

.container { position: relative; }
@media (max-width: 767px){
  .img-responsive.mytumb { width: 20%}
}

It is not perfect but you've got the idea I suppose.

Answer 2

You can go here for a solution position one image above another , you will surely get a solution. Happy Coding!