Images Overlapping and responsive

Question

Images Overlapping and responsive

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Good morning, Friends I'm a beginner in CSS and I'm using the bootstrap and would like to put two overlapping images, and they should be responsive and the image2 must have absolute position with respect to image1. >

html css twitter-bootstrap

asked by anonymous 20.12.2016 / 14:41

2 answers

Grid bootstrap getting misaligned on panel with results brought from the bank How do I make prints between a web server and a local printer?

score 1 · Answer 1

Would that be?

img{
  max-width: 100%;
}

.figure, img{
  position: relative;
}

.figure{
  max-width: 842px;
}

.figure img:last-child{
  position: absolute;
  max-width: 30%;
  margin-left: 35%;
  top: 20px;
  border: 2px solid #fff;
}

<figure class="figure">
  <img src="http://msalx.viajeaqui.abril.com.br/2013/07/11/1112/6IivB/kuken-tepuy-timsnell-creative-commons.jpeg?1373556397"alt="" />  
  <img src="http://msalx.viajeaqui.abril.com.br/2013/07/11/1112/6IivB/kuken-tepuy-timsnell-creative-commons.jpeg?1373556397"alt="" />
</figure>

Just look at the size of the image, in my example I'm using the same image, ie the two have the same size, if you have different size you will have to adjust according to the need

score 0 · Answer 2

To make the images responsive you can use the img-responsive class. To leave one image on the other, you can z-index , and leave the absolute position on the second image for a div that contains both. Image classes can be:

#img1{
  z-index: 0;
}

#img2{
  position: absolute;
  z-index: 1;
  width: 50px;
  height: 50px;
  left:80px; 
  top: 80px;
}

JSFiddle : link