CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Gaurav
Gaurav

Reputation: 133

I want to overlay image on top of other existing image using javascript

I have user photo which I want to put on top other image, so as to make that image complete.

Here is my code

<div id="containerDiv">
<figure>
    <img id="someImage" src="../images/someImage.gif" >
</figure>

<div id="buttonDiv">
        <button>Done</button>
</div>
</div>

I have other image which I am taking from cache and putting in some 

<img src=cachedImage />

I want to style it so that I can put the cached image on top of someImage also The entire containerDiv should be responsive to the browser window. So, I want to get the css part of this. I tries using relative and absolute positioning 

<style>
   #containerDiv{
      position:relative; width:100%; height:300px;
   }

    #someImage{
      position:absolute; top:10px; left:100px;
   }

   #buttonDiv{
      position:absolute; top:100px; left:200px;
   }

</style>

I want the button to be responsive with the someImage too. But it does not move along with the image. Also the cached image should be in sync with someImage. Thanks in advance.

Upvotes: 1

Views: 272

Answers (1)

Madhav
Madhav

Reputation: 248

i am not aware with your code but try this hope this helps you

<div class="div on which you want to show overlay">
  <div class="overlay overlay-div">
    <center>
       <div class="overlay-content"><p>your overlay content,img goes here</p>
       </div>
    </center>
  </div>
</div>

and css for overlay is :

.overlay{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1050;
      background-color: rgba(0,0,0,0.5); /*dim the background*/
 }

you can show overlay div on mouse hover/in/out events.

Upvotes: 2

Related Questions