title: How to put an image on another image
body: <p>I have the following script</p>
  
  <pre><code>&lt;div class="left"&gt;
  &lt;img src="image1.jpg" height="186" width="160" /&gt; 
  &lt;/div&gt;
  
  &lt;div class="center"&gt;
  &lt;img src="image2.jpg" height="186" width="160" /&gt; 
  &lt;/div&gt;
  
  &lt;div class="right"&gt;
  &lt;img src="image3.jpg" height="186" width="160" /&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>which generates the following :
  <img src="https://i.stack.imgur.com/eBqwM.png" alt="Figure-2"></p>
  
  <p>I have this simple form to upload an image:</p>
  
  <pre><code>&lt;form action="upload/image" method="post"&gt;
  &lt;input type="file" name="upload_image" /&gt;
  &lt;input type="submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The reason to upload an image is to see how the mug(above) would look like with the image. </p>
  
  <p>Now after uploading the image the mugs would look like following 
  <img src="https://i.stack.imgur.com/lg4Gy.png" alt="Figure-2(After uploading image)"></p>
  
  <p>Figure-2</p>
  
  <p>Now if you kindly take a closer look at the above image you will see the uploaded image is sticked with the mug in such a way that as if it was designed with Photoshop but actually it was not . </p>
  
  <p>Now my question is would you please kindly tell me how to paste the uploaded image on to all the three images of the coffee mug and make them look like the figure-2.</p>
  
  <p>Thanks in Advance :)</p>
  
  <p>P.S
  I got the idea from this site-> <a href="http://www.zazzle.com/cr/design/pt-mug" rel="nofollow noreferrer">http://www.zazzle.com/cr/design/pt-mug</a></p>
  
  <p>I am trying to achieve the same thing the website has(I have been trying for so long but yet no result...  failing to put the the uploaded image on the images of the mug ).</p>
  
  <p>Here's the download link for the image I used here <a href="http://i43.tinypic.com/d66h4.png" rel="nofollow noreferrer">http://i43.tinypic.com/d66h4.png</a></p>