After using CSS clip can I move the image to display a different section?

Question

I have used the CSS clip property to clip my images. It displays the image from the top left corner. Can I move the image so it displays the center of the image? I have tried the following style properties to try and move the images but have been unsuccessful, top, left and margin. I have searched the all over the internet but all I can find is instructions on how to use the clip property. Here is my code:

CSS

.clip {
    position: relative;
    height: 130px;
    width: 200px;
    border: solid 1px #ccc;
}
.clip img {
    position: absolute;
    clip: rect(10px 190px 120px 10px);
}

html

<ul id="galleries">
  <li class="clip">
    <a href="images/image_01.jpg" rel="lightbox">
      <img src="images/image_01.jpg"/>
    </a>
  </li>
  <li class="clip">
    <a href="images/image_02.jpg" rel="lightbox">
      <img src="images/image_02.jpg"/>
    </a>
  </li>
  <li class="clip">
    <a href="images/image_03.jpg" rel="lightbox">
      <img src="images/image_03.jpg"/>
    </a>
  </li>
</ul>

Answer 1

Here is the answer for your question. The overflow will effectively hide all space you do not want to be shown. Placing position relative on the img will cause the img to show in the middle or where you want it.

Here is a jsFiddle

CSS

.clip {
    position: relative;
    overflow: hidden; /*** Overflow to hide anything out of the size of the box ***/
    height: 130px;
    width: 200px;
    border: solid 1px #ccc;
}
.clip img {
    position: relative; /*** position relative to place the img in center ***/
    top: -50%;
    left: -15%;
 }