/* ****************************************************************************** */
.item {}
.img_preview {
width: 50px;
height: 50px;
display: flex;
/* overflow: hidden; */ /* "обрезает" рисунок, если он больше блока по размеру */
border: 1px solid #fff;
background-color : #c0c0c0;
float:left; /* right; */
}
.img_preview img {
margin: auto;
width: 100%;
-webkit-transform:scale(0.5); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(1,1); /*Mozilla scale version*/
-o-transform:scale(0.5); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}
.img_preview p {
margin: auto;
text-align:center;
line-height:50px;
}
.img_preview img:hover {
-webkit-transform:scale(2.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(2.2); /*Mozilla scale version*/
-o-transform:scale(2.2); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
z-index: 1000;
}
.floattext {
display:block;
padding-left: inherit;
padding-top:5px;
padding-left:163px;
text-align:left;
text-indent:0px;
border-right : 0px solid #fff;
border-top : 1px solid #c0c0c0;
border-left : 1px solid #c0c0c0;
border-bottom : 0px solid #fff;
}
.floatboximg {
display:block;
border-right : 1px solid #c0c0c0;
border-top : 1px solid #fff;
border-left : 0px solid #000;
border-bottom : 1px solid #c0c0c0;
width:156px;
height:auto;
float:left;
margin-left:0px;
padding-top:0px;
padding-left:0px;
text-align:left;
text-indent:0px;
}
/* ****************************************** */
/* http://www.dynamicdrive.com/style/csslibrary/item/css3_hover_image_gallery/ */
.hovergallery {
display: flex;
/* overflow: hidden; */
border: 1px solid #fff;
background-color : #c0c0c0;
float:right;
}
.hovergallery img{
-webkit-transform:scale(0.5); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.5); /*Mozilla scale version*/
-o-transform:scale(0.5); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
/* opacity: 0.7; */ /*initial opacity of images первоначальная "прозрачность" маленькой картинки */
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
/* Вызов:
*/
/* ****************************************** */
/* Код увеличителя начинается здесь */
/* Если ваше изображение не связано ссылкой с другой страницей, оставьте ссылку в виде
Иначе увеличительне будет работать в IE6 */
.ienlarger {
float: left;
clear: none; /* Можно установить left или right по необходимости */
padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */
padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */
text-indent:0px;
/* margin-left:5px; */
}
.ienlarger a {
display:block;
text-decoration: none;
cursor:default;
/* Если добавить правило cursor:default;, то отключится курсор в виде руки */
}
.ienlarger a:hover{ /* Не надо изменять тип позиционирования */
position:relative;
}
.ienlarger span img {
border: 1px solid #FFFFFF; /* Добавляем рамку вокруг изображения */
margin-bottom: 8px; /* /Сдвигаем текст вниз от изображения */
}
.ienlarger a span { /* Для большого изображения и названия */
position: absolute;
display:none;
color: #fff; /* Текст названия */
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px; /* Размер шрифта названия */
background-color: #707070;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img { /* Для IE, чтобы не было рамки вокруг ссылки */
border-width: 0;
}
.ienlarger a:hover span {
display:block;
top: 50px; /* Большое изображение выскакивает вверх на 50px от миниатюры */
left: -350px; /* Большое изображение выскакивает влево на 90px от миниатюры */
z-index: 100;
/* Если добавить правило cursor:default;, то отключится курсор в виде руки на большом изображении */
}
.resize_thumb {
width: 150px; /* Вводим нужный размер миниатюры здесь */
height : auto;
}
/* Код увеличителя закончен */
.maincontainer { width: 99%; margin: 0px auto; padding-left: 10px;align:center;}
.text-interpretation {
text-align:left;
/* не работает
padding:10px auto;
*/
/*
margin-left:10px;
padding-left:25px;
text-indent:15px;
*/
/* position:relative; */
}
/* **************** ВЫЗОВ: *************************
******************************************************* */
