How to Overlap one Image with another?

Question

How to Overlap one Image with another?

Navigation

#1 by (1 votes)

1

I'm having trouble positioning one image after another without using position absolute/fixed . When using divs instead of imgs, if you apply float:left , it stays in context above the other divs, overlapping with other divs, but with img this does not work.

Example with DIVS:

.wrap-elEx {
  margin-bottom: 20px
}
.elEx {
  width: 40px;
  height: 40px
}

.elEx_first {
  background-color: #8E44AD;
  float: left/* Esse elemento ficará a frente do outro */
}
.elEx_last {
  background-color: #23b14d
}

Exemplo com DIV
<div class="wrap-elEx">
  <div class="elEx elEx_first"></div>
  <div class="elEx elEx_last"></div>
</div>

Exemplo com IMG
<div class="wrap-elEx">
  <img src="https://i.imgur.com/KJHh65N.jpg"class="elEx elEx_first">
  <img src="https://i.imgur.com/G6WP6yB.jpg"class="elEx elEx_last">
</div>

html html5 css css3

asked by anonymous 04.07.2018 / 15:34

1 answer

QUERY CODEIGNITER - INNER JOIN menu sending the first li to last li

score 1 · Answer 1

You can use transform:translateX(-100%) in the second image to put it over the first, you do not have to use position or float

Follow the example.

.wrap-elEx {
  margin-bottom: 20px
}
.elEx {
  width: 40px;
  height: 40px
}

.elEx_first {
  background-color: #8E44AD;
}
.elEx_last {
  background-color: #23b14d
}
img.elEx_last {
    transform: translateX(-95%);
}

Exemplo com IMG e transform: translateX de -95% para vc ver que ficou por cima mesmo... não tem float ou position
<div class="wrap-elEx">
  <img src="https://i.imgur.com/KJHh65N.jpg"class="elEx elEx_first">
  <img src="https://i.imgur.com/G6WP6yB.jpg"class="elEx elEx_last">
</div>

OBS 1: IMPORTANT ... the render only throws one image over the other, but it still occupies the space where it should be, so if you put for example a text after the second image you will see that there will be an "empty" space between the overlapping images and the text ...

OBS 2: I do not know if this is your case, but you can use pseudo-elemento to put one image on top of the other tb without having to include another direct img in html

If you want to use a pseudo-element option follows. But as I said in the comment "or you use content:url() with the image already in the right size that you need, or you will have to use the img as background-image of that ::after . position:relative in the div that will receive this pseudo element " Expand the code below to see the right code.

.wrap-elEx {
    margin-bottom: 20px;
    width: 40px;
    height: 40px;
    position: relative;
}
.wrap-elEx::after {
    content: "";
    background-image: url(https://i.imgur.com/G6WP6yB.jpg);
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 5px; /* o left tem que ser 0, só deixei 5 pra vc ver a img por baixo */
}
.elEx {
    width: 40px;
    height: 40px;
}

<div class="wrap-elEx">
    <img src="https://i.imgur.com/KJHh65N.jpg"class="elEx ">
</div>