How to put a partially transparent image above another image in html?

Question

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.

Answer 1

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.com/wp-content/uploads/flickr/5661878892_15fba42846_o.jpg" alt=""/> <img class="image-overlay" src="https://newevolutiondesigns.com/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.

Answer 2

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 .

Answer 3

Please check below link

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

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

Answer 4

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.com/data_images/original/4237684-images.jpg" /> <img class="front" src="http://www.hdwallpapery.com/static/images/creativity_water_spray_drops_flower_rose_desktop_images_TVIdSpG.jpg" /> </div>