How to make image clipping in css

I tried to make an clipping mask on css but I think I'm on a wrong track. Here is the image that im trying to convert to html..

enter image description here

now that I tried it on my end, it looks like a mess: enter image description here

CSS:

.img_nav_individual {
    float: left;
    border: 3px solid #fff;
    margin-left: 8px;
    outline: 1px solid #c1cacf;
    max-width: 96px;
}

.img_nav_individual img { clip: rect(10px, 290px, 190px, 10px); }

HTML:

<div class="img_nav_individual"> <img src="img/parents1.png" />
  <div class="image_nav_text"> <span>parents</span> </div>
</div>

Suggestions are very much appreciated. Thanks!

Solution

You should use overflow:hidden; attribute on img_nav_individual. That will help here is your example : http://jsfiddle.net/6wPvW/