How to Overlay an Image with another?

Asked

Viewed 1,981 times

1

I’m having trouble positioning one image after another without using position absolute/fixed. When using Divs instead of imgs, if you apply a float:left, it is in the context above the other Divs, being superimposed on the other Divs, but with img it 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 css html5 css3
  • 1

    I thought it was because of the display block that the Divs have by default, but no, they behave in different ways even, I don’t know why, and now I’m curious rsrs. Ball show the question!

  • 1

    Ever thought of using one pseudo-elemento to do this?

  • have to be different pictures, so one pseudo-elemento wouldn’t work, I guess

  • 1

    Jef works with different imgs yes, I will edit my answer and put an option of this type, but the pseudo element is not direct in the img tag but Sím in the div in which the img is inside!

  • 1

    Face I even managed to do with pseudo-element, but either 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 this ::after. Besides that you will need to put position:relative in the div that will receive this pseudo element, so I think this option will not suit you... But if you want to tell me that I do an Edit in my answer with this option

  • opa can send the answer, any help is welcome

  • OK young man edited the answer with what I managed to do using the pseudo-element...

Show 2 more comments

1 answer

1

Dude you can use transform:translateX(-100%) in the second image to put it over the first, do not need 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 transform only plays one image on top of 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 superimposed images and the text...

OBS 2: I don’t know if it’s your case, but you can use one pseudo-elemento to put one image on top of the other, without having to include another direct image in html

If you want to use it follow an option with pseudo-element. But as I said in the comment "or you use the content:url() with the image already in the right size you need, or you will have to use the img as background-image that ::after. Besides you’ll need to put 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>

  • have to be different pictures, so one pseudo-elemento would not work I believe, your solution leaves part of the image visible superimposed that is right or it is only here that behaves so rsrs

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.