CODEWITHSUNDEEP
javascripthtmlcssz-indextransparent
Markus Hallcyon
Markus Hallcyon

Reputation: 371

How to put an img element behind a transparent img element?

I have two img elements and I want the first image.png to go behind the transparent image.png. I have tried a lot of different things (z-index, transparent background color, rgba background color, positioning absolute and relative, nesting one in a div, making them both divs). Right now i've been trying to use a transparent .png image. The image .png is actually behind it, but it still shows through it. Please help.

html: 

<body>
    <main class="site-wrapper">
        <div class="carnival"></div>
        <div id="images">
            <img id="divbox" src="images/divbox.png">
            <img id="clown1" src="images/clown1.png">
        </div>
    </main>
</body>

js: (i did the styles in js b/c I was interested in learning how to do it that way):

//styles

//divbox:
document.getElementById('divbox').style.display = "inline-block";
document.getElementById('divbox').style.transform = "skew(-2deg)";
document.getElementById('divbox').style.marginTop = "21%";
document.getElementById('divbox').style.marginLeft = "47.6%";
document.getElementById('divbox').style.height = "200px";
document.getElementById('divbox').style.width = "200px";
document.getElementById('divbox').style.border = "1px solid orange";
document.getElementById('divbox').style.position = "absolute";
document.getElementById('divbox').style.zIndex = "2";

//clown1:
document.getElementById('clown1').style.display = "inline-block";
document.getElementById('clown1').style.transform = "rotate(90deg)";
document.getElementById('clown1').style.marginTop = "21%";
document.getElementById('clown1').style.marginLeft = "53%";
document.getElementById('clown1').style.border = "1px solid green";
document.getElementById('clown1').style.position = "relative";
document.getElementById('clown1').style.zIndex = "1";

Thanks for any help, please let me know if I can answer questions.

UPDATE:

Sorry for not being clearer. I have now achieved getting the image behind the other image, but since the image ontop is transparent, the image behind is showing. How do I stop this?

Here is an example of what is happening:

http://oi61.tinypic.com/2mw9egx.jpg

Notice the orange border is ontop so it is definitely ontop.

UPDATE 2:

This should make it really clear what I want. Again sorry for the confusion:

http://oi59.tinypic.com/eamb0n.jpg

Upvotes: 1

Views: 2743

Answers (4)

hungerstar
hungerstar

Reputation: 21705

I would do something like the following jsFiddle: http://jsfiddle.net/7gdx48fu/. Might need to reload a couple times to see a good example of the overlay working.

Create a wrapper DIV for your two images. Set that wrapper DIV's to position: relative so we can use absolute positioning on one of the images it contains. By doing this we prevent the absolute positioned image from potentially aligning itself elsewhere in the page, like the upper left corner of the browser window.

Then, set the position of our overlay image, the transparent PNG, to position: absolute along with top: 0 and left: 0 to align it with the first images upper left corner.

You can do this without using z-index if you watch the order you include your images. Place the image you want behind the transparent PNG in the markup first followed by the transparent PNG.

<div class="img-container">
    <img src="http://lorempixel.com/200/200/city/">
    <img class="overlay" src="http://lorempixel.com/200/200/city">
</div>

.img-container {
    position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.25; /* using this to replicate the transparent PNG */
}

EDIT

The OP's requirements have changed to include how to prevent an image behind a transparent image from showing through the transparent image.

Here is an updated jsFiddle: http://jsfiddle.net/7gdx48fu/2/.

This approach I wrapped the transparent PNG in a wrapper DIV and set it's background color. I used white in my example but you may use any color.

<div class="img-container">
    <img src="http://lorempixel.com/200/200/city/">
    <div class="overlay">
         <img src="http://lorempixel.com/200/200/city">
    </div>
</div>

.img-container {
    position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    top: 15px; /* shifting overlay for illustrative purposes - not use case code */
    left: 15px; /* shifting overlay for illustrative purposes - not use case code */
}
.overlay img {
    opacity: 0.25; /* using this to replicate the transparent PNG */
}

Not perfect but I'm unsure of how else to proceed.

EDIT 2

It seems the OP wants to do a form of masking. You can do this with overflow: hidden.

I have updated the jsFiddle: http://jsfiddle.net/7gdx48fu/4/

In this updated answer I have kept the wrapper DIV and set it with a fixed width and height. Then applied overflow: hidden. What we are doing here is creating an invisible window that will only show content when it is within the dimensions of the window.

To have the image appear as if it is coming out of the base layer image simply adjust the position of the image inside the wrapper DIV. For the jsFiddle simply play with the value of top in .mask img.

This will need a little tweaking for the proper placement and size of the .mask DIV to fit your needs but hopefully points you in the right direction.

<div class="img-container">
    <img src="http://lorempixel.com/200/200/city/">
    <div class="mask">
        <img src="http://lorempixel.com/200/50/city">
    </div>
</div>

.img-container {
    position: relative;
}
.mask {
    position: absolute;
    top: 25px;
    left: 25px;
    height: 100px;
    width: 100px;
    overflow: hidden;
    border: 1px solid red; /* for illustrative purposes */
}
.mask img {
    position: relative;
    top: 25px;
}

Upvotes: 2

Michail Michailidis
Michail Michailidis

Reputation: 12181

Put them both in a parent container. Make the parent have position: relative and put both images having position:absolute. That way they will stack.(Something like that that I didn't check The order of img's could be wrong - play around a bit.

CSS:

.parent > img.transparent {
    position: absolute;
}
.parent > img {
    position: absolute; opacity: 0.5
}

HTML:

<div class="parent" style="position:relative">
    <img src="other.png" class="transparent"/>
    <img src="transparent.gif"/>
</div>

Some more explanation: When you make a parent/ancestor element's position relative it means that its contents that are absolute will be relative to the parent and not to the whole window

Upvotes: 0

Alnitak
Alnitak

Reputation: 339836

  1. make both images' position absolute instead of relative
  2. for the above to work, some common ancestor (i.e. #images) must have a non-default position too (e.g. relative)
  3. forget zIndex - all else being equal, the latter element will be "topmost"
  4. put all the above in a CSS style sheet instead of in JS code!

Forgetting the other transformations and margins, etc, the core CSS that you need is:

#images {
    position: relative;
}

#divbox, #clown1 {
    position: absolute;
}

Upvotes: 0

Billy
Billy

Reputation: 2448

Have you tried the css opacity property ? 

#clown1{ opacity:0.3;}

Upvotes: 0

Related Questions