Overflow

• 
• 

CSS от Alen Grakalic.

/* overflow */
ul#thumbs, ul#thumbs li{
  margin:0;
  padding:0;
  list-style:none;
}
ul#thumbs li{
  float:left;
float:top;
  margin-right:1px;
  border:1px solid #999;
  padding:1px;
}
ul#thumbs a{
  display:block;
  float:left;
float:top;
  width:230px; /* ширина видимой части */
  height:200px; /* высота видимой части */
  line-height:230px;
  overflow:hidden;
  position:relative;
  z-index:1;
}
ul#thumbs a img{
  float:left;
  position:absolute;
  top:-20px;
  left:-60px;
}
ul#thumbs a:hover{
  overflow:visible;
  z-index:1000;
  border:none;
}
/* /overflow */

CSS3

Это просто загруженные картинки, без применения стилей.



А здесь уже к изображениям применяются стили, благодаря которым появляются подписи с разными эффектами появления.

Простая подпись

Подпись на всю картинку

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Проявляющаяся подпись

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Выскальзывающая подпись

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Подпись с поворотом

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Масштабная подпись

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.