I want to place an image above another image so that when I make my second image partially transparent first image will be seen. But I do not want to use background image for first image as

 <div style="background-image: url("firstImage.png");">
    <img src="secondImage.png"/>
 </div>

as it is much obvious. Is there any technique to put another image on first image without making first image as background image.

I want to place an image above another image so that when I make my second image partially transparent first image will be seen. But I do not want to use background image for first image as

 <div style="background-image: url("firstImage.png");">
    <img src="secondImage.png"/>
 </div>

as it is much obvious. Is there any technique to put another image on first image without making first image as background image.

• javascript
• html
• css
• image
• opacity

• Can you share the images please? – Frondor Commented Feb 29, 2016 at 5:48
• I'm not 100% sure I understand what you are looking for based on your description, but it sounds like what you are looking for could be replicated by using css positioning to place one image over the other (probably absolute or relative positioning in your case) – Chris O'Kelly Commented Feb 29, 2016 at 5:48
• @Frondor You can consider any two images but I will change the opacity of image which is above first image so that first image will be seen also. – user5954693 Commented Feb 29, 2016 at 6:09
• In simple i think, you have to keep two placeholder for 2 images. Make both the containers with absolute position, so one es above. Keep the parent as relative positioned . Then you can change the opacity of the second image – Kiran Krishnan Commented Feb 29, 2016 at 6:56

4 Answers 4

try this :

 <div class="imageWrapper" style="position: relative; width: 195px; height: 195px;">
   <img src="firstImage.png" alt=.. width=.. height=..style="position: relative; z-index: 1;" />
   <img src="secondImage.png" alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" />
 </div>

for more solutions check this link.

Were going to use css for this. The position statement allows for absolute and relative positioning.

By setting position:absolute we can position the element relative to the document's (0,0). Then you can use top, bottom, left, right to further position the element relative to those edges.

position:relative is similar to the default positioning of HTML elements. However, by adding position:relative to the parent of an absolute positioned element, we force it to use the partent's (0,0), rather then the document's.

.layered-image {
  position: relative;
}
.layered-image img {
  height: 200px;
  width: 300px;
}
.image-overlay {
  position: absolute;
  top: 30px;
  left: 30px;
  opacity: .4
}

<div class="layered-image">
  <img class="image-base" src="http://digital-photography-school./wp-content/uploads/flickr/5661878892_15fba42846_o.jpg" alt=""/>
  <img class="image-overlay" src="https://newevolutiondesigns./images/freebies/city-wallpaper-47.jpg" alt="" />
</div>

A side note: While z-index can be useful, i try to avoid it whenever possible. It causes some nasty bugs in the latest versions of webkit, especially safari's implementation in iOS. If you order your html elements properly, there is no need for using z-index. Except of course, when you must.

Please check below link

http://www.impressivewebs./css-opacity-that-doesnt-affect-child-elements/

You will get what you want by using simple css changes & opacity feature

Put the image tags in the container, and first make the positions to absolute afterwards set the z-index property of back or front image then set the ocupacy of the image.

            img {
     width: 300px;
     height: 300px;
     position: absolute;
   }
   
   img.front {
     z-index: 2 opacity: 0.6;
     filter: alpha(opacity=60);
   }
   
   img.back {
     z-index: 1
   }

  <div>
  <img class="back" src="http://all4desktop./data_images/original/4237684-images.jpg" />
  <img class="front" src="http://www.hdwallpapery./static/images/creativity_water_spray_drops_flower_rose_desktop_images_TVIdSpG.jpg" />

</div>