There are a lot of dynamically designed websites out there where there divs or images shrink as the browser size decreases.

An example of this would be http://en.wikipedia.org/wiki/Main_Page

The div in which the text is in shrink as the browser size decreases. This happens up until a certain point, where it just decides to stop shrinking, and just start to cover the text boxes.

I would like to do this effect with a JSFiddle I am working on:
http://jsfiddle.net/MrLister/JwGuR/10/

If you stretch the size of the fiddle, you will see the pictures dynamically adapt.
The goal is to make it just stop shrinking at a certain point, and just start covering or caving in on this pictures. I want to do this because eventually it gets so small that they text on each image overlaps and it looks bad.

Here is the CSS for the Fiddle:

.figure {

    position: relative;

    display:inline-block;

    max-width: 33%;

}



.figure .figcaption {

    text-align: center;

    height:0;

    top: 40%;

    width: 100%;

    font-size: 55px;

    color: white;

    position: absolute;

    z-index: 1;

}



.figure img {

    display: block;

    max-width: 100%;

}