title: center image inside overflow-hidden-parent
body: <p>I have an image inside a span tag, the span has a set width and height, and is set to overflow hidden. so it only reveals a small portion of the image. This works but the small portion of the image that is visible is the top left corner. I would like it to be the center of the image that is visible. I think I need to absolutely position the image, but the size of the image can vary though. Does anyone know how to do what I am trying to do?</p>
  
  <p>Thanks!</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="lightbox_images"&gt;
                  &lt;h6&gt;Alternate Views&lt;/h6&gt;
                  &lt;span&gt;
                      &lt;a href="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 1"&gt;
                          &lt;img src="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" /&gt;
                      &lt;/a&gt;
                  &lt;/span&gt;
                  &lt;span&gt;
                      &lt;a href="https://www.kranichs.com/product_images/Simon-G@346_M_346_M.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 2"&gt;
                          &lt;img src="https://www.kranichs.com/product_images/Simon-G@346_M_346_M.jpg" /&gt;
                      &lt;/a&gt;
                  &lt;/span&gt;
                  &lt;span&gt;
                      &lt;a href="http://www.kranichs.com/images/simong/sim_banner_01.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 3"&gt;
                          &lt;img src="http://www.kranichs.com/images/simong/sim_banner_01.jpg" /&gt;
                      &lt;/a&gt;
                  &lt;/span&gt;
                  &lt;span&gt;
                      &lt;a href="http://www.kranichs.com/images/psu/psu_banner.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 4"&gt;
                          &lt;img src="http://www.kranichs.com/images/psu/psu_banner.jpg" /&gt;
                      &lt;/a&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.lightbox_images{
      background-color:#F9F9F9;
      border:1px solid #F0F0F0;
  }
  .lightbox_images h6{
      font-family:Verdana, Arial, Helvetica, sans-serif;
      color:#333333;
      font-size:14px;
      font-weight:bold;
      font-style:italic;
      text-decoration:none;
      margin:0px;
  }
  .lightbox_images span{
      padding:5px;
      padding-bottom:15px;
      background-color:#DFDFDF;
      margin:5px;
      display:inline-block;
      border:1px solid #CCC;
  }
  .lightbox_images a{
      display:inline-block;
      width:60px;
      height:60px;
      overflow:hidden;
      position:relative;
  }
  
  .lightbox_images a img{
      position:absolute;
      left:-50%;
      top:-50%;
  }
  
  .lightbox_images span:hover{
      border:1px solid #BBB;
      background-color:#CFCFCF;
  }
  </code></pre>