Javascript and overlaying an image on a div

Question

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

#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;
}

Answer 1

My recommendation would be to try placing the exif_data div explicitly by setting the css properties for top and left. For example, given this DOM:

<div id="content">
  <img id="image" src="image.jpg" height="500" width="500" />
  <div class="exif_data">some data</div>
</div>

And this css:

#exif_data { position: absolute; }

You could get the "some data" blob to be on top of the image and at the spot you expect with javascript like so:

var exif = document.getElementById('exif_data');

// you could center this easily with a little math, or set it explicitly:
exif.style.top = '100px';
exif.style.left = '100px';

Answer 2

我必须用JavaScript将整个CSS退回，以便再次排队