Javascript and overlaying an image on a div
<p>I have my code setup to overlay this div on an image when hovering, but then if the image is too big, i use a function to scale the image down and to scale down everything else according, but then the overlay image is moved all the way to left how can i scale it and not have it move?
my css code and the javascipt just changes the width and height</p>

<pre><code>#exif_data{
    position:absolute;
    z-index:2;
    color:white;
    background-color: black;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    opacity:0.6;
    filter:alpha(opacity=60);
}
#image{
    border: none;
    z-index:1;
}
#content{
    position:relative; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 5.7%;
    text-align: center;
}
</code></pre>
