CSS3 галерея изображений при помощи свойства transform

С помощью CSS3 анимации, псевдокласса hover, теней и свойства transform можно создать галерею изображений. Изображение увеличивается при наведении на него курсора мышки (псевдокласс hove), образовывается тень, и плавный переход в браузере OPERA (анимация).

На данный момент Hover-эффект лучше всего работает в Google Chrome, Safari 4+ и Opera 9.5+. В FF 3.6 поддержка анимации CSS3 не включена, а в IE этот эффект отображаться не будет. В браузере OPERA вы сможете полностью прочувствовать этот необычный эффект.

HTML

<div class="hovergallery">
<img src="coconut.jpg" />
<img src="sunbreakthrough.jpg" />
<img src="desert.jpg" />
<img src="sunflower.jpg" />
<img src="forest.jpg" />
<img src="duck.jpg" />
</div>

CSS

.hovergallery img
{
-webkit-transform:scale(0.8); /*Webkit: Уменьшает размер изображ. 0.8x относ-но исходного*/
-moz-transform:scale(0.8); /* для Mozilla */
-o-transform:scale(0.8); /*для Opera */
-webkit-transition-duration: 0.5s; /*Webkit: Длительность анимации*/
-moz-transition-duration: 0.5s; /* для Mozilla */
-o-transition-duration: 0.5s; /* для Opera*/
opacity: 0.7; /*исходная непрозрачность изображ.*/
margin: 0 10px 5px 0; /*поля между изображ.*/
}
.hovergallery img:hover
{
-webkit-transform:scale(1.1); /*Webkit: Увеличение излбраж. 1.1x относ-но исходного*/
-moz-transform:scale(1.1); /*для Mozilla */
-o-transform:scale(1.1); /*для Opera */
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px тень вокруг изображ.*/
-webkit-box-shadow:0px 0px 30px gray; /*для Safari */
-moz-box-shadow:0px 0px 30px gray; /* для Mozilla */
opacity: 1;
}