How to Overlay Images

Positioning and overlaying image on another image

Here's a simple example using divs instead of images: http://jsfiddle.net/sqJtr/

Basically, you put both of your images in the same container. Give the container a position that isn't static (in my example, relative). Then give the overlay image position: absolute and position it however you want using bottom and right.

How to overlay images

I just got done doing this exact thing in a project. The HTML side looked a bit like this:

<a href="[fullsize]" class="gallerypic" title="">
  <img src="[thumbnail pic]" height="90" width="140" alt="[Gallery Photo]" class="pic" />
  <span class="zoom-icon">
      <img src="/images/misc/zoom.gif" width="32" height="32" alt="Zoom">
  </span>
</a>

Then using CSS:

a.gallerypic{
  width:140px;
  text-decoration:none;
  position:relative;
  display:block;
  border:1px solid #666;
  padding:3px;
  margin-right:5px;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:40%;
  top:35%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}

I left a lot of the sample in there on the CSS so you can see how I decided to do the style. Note I lowered the opacity so you could see through the magnifying glass.

Hope this helps.

EDIT: To clarify for your example - you could ignore the visibility:hidden; and kill the :hover execution if you wanted, this was just the way I did it.

overlay 2 images with transparency in R

Here's one option, using rasterImage from base R.

First lets get two images. For the first we read in the R logo jpeg. Then add another array layer to hold the alpha channel (jpegs do not have transparency)

img.logo = jpeg::readJPEG(system.file("img", "Rlogo.jpg", package="jpeg"))
img.logo = abind::abind(img.logo, img.logo[,,1]) # add an alpha channel

For the second image, lets make it an array the same dimensions as img.1, but fill it with random colors

img.random = img.logo
img.random[] = runif(prod(dim(img.random))) # this image is random colors

Now lets set the base image to fully opaque, and the R logo to semi-transparent

img.logo[,,4] = 0.5  # set alpha to semi-transparent
img.random[,,4] = 1  # set alpha to 1 (opaque)

Now we have our example images, we can superimpose them using rasterImage.

png('test.png', width = 2, height = 2, units = 'in', res = 150)
  par(mai=c(0,0,0,0))
  plot.new()
  rasterImage(img.random, 0, 0, 1, 1)
  rasterImage(img.logo,   0, 0, 1, 1)
dev.off()

How to overlay images with transparent background?

As a matter in fact, I find out the solution that suits for me. Perhaps It's not an optimal solution but at least It works.

The main idea is that I merge(paste) 2 pictures into 1 result using PIL library and the method paste, so that I have background and foreground.

In my case I have Picture 1 - foreground and Picture 2 - background.

My code :

# This function fit picture 2(background) for picture 1 . It's pare
def transform (template):
    
    img = Image.open(template)
    img_w, img_h = img.size
    image = img.resize((img_w+coef_w,img_h+coef_h),Image.ANTIALIAS)
    # change coef_w and coef_h to resize to fit template 
    image.save('updated_picture.png',"PNG")

# This function merge,compose, concat) pictures 
def compose (image, template):
    img = Image.open(image)
    img_w, img_h = img.size
    print(img.size)
    background = Image.open(template)
    print(background.size)
    # resize the image
    size = background.size
    background = background.resize(size, Image.ANTIALIAS)
    bg_w, bg_h = background.size
    offset = ((bg_w - img_w) // 2, (bg_h - img_h) // 2)
    background.paste(img, offset, mask=img)
    background.save(f'{image}_final.png', "PNG")

How it's work, I transform template(ears) so they would lay on the picture at center and the next one script offset foreground by center so I can get next result.

Transform is needed to make template smaller or bigger. The results would depend on of it's template. I mean the scale of ears in my case. At the next picture you can see what I mean

How overlay two pictures to another using HTML-CSS?

If you want to overlay a image over another one you just have to make the second one have an absolute position, and with z-index determine wich one will be on the top, like this:

.top {  position: absolute;  left: 100px;  top: 100px;  border: 1px solid black;  z-index: 1; }

<div>
<img src="http://placehold.it/150x150"><img class="top" src="http://placehold.it/150x150">
</div>

back = back.resize(img.size)

blended_image = Image.blend(img, back, 0.5)

<body>
   <img src="" id="image" style="width:270px;height:270px;"/>
   <img src="" id="image1" style="width:270px;height:270px;"/>
   This is a text!
</body>

img {
   position: relative;
   z-index: 1;
}

div {
  position: absolute;
  top: 0px; //To see the difference
}