<style>
#panel {
position:relative;
/* - Ширина галереи - */
width: 150px;
/* - Высота галереи - */
height: 150px;
overflow: hidden;
/* - Тени краёв галереи (можно удалить) - */
-o-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
/* - Округление краёв галереи (можно удалить) - */
border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
/* - Если удалите тени это тоже удаляйте - */
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
}
/* - Если удалите тени это тоже удаляйте - */
#panel:hover {
-o-box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);
}
#panel img {
position: absolute;
-ms-interpolation-mode:nearest-neighbor;
image-rendering: optimizeSpeed;
}
</style>
<script src="http://delaisait.ucoz.ru/js/gallery/dsgalery.js"></script>
<div id="panel"></div>
<div id="imgsource" style="display:none;">
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_1.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_2.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_3.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_4.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_5.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_6.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_7.jpg" />
<img src="http://delaisait.ucoz.ru/script/img/1/galerea/dsgalery_8.jpg" />
</div>