/* Основной блок карусели */ #carousel1 { width:425px; height:250px; position: relative; border: 3px solid #cccccc; background-repeat: no-repeat; overflow:scroll; margin: 10px auto; } /* Внутренний блок */ #innerCarousel { position: absolute; width: 100%; height: 100%; display: block; } #carousel1 img { border: none; } #buttonLeft { width: 30px; height: 14px; background-image: url('http://vinkivci-crb.at.ua/carousel/right.png'); background-repeat: no-repeat; position: absolute; bottom: 5px; right: 5px; cursor: pointer; } #buttonRight { width: 30px; height: 14px; background-image: url('http://vinkivci-crb.at.ua/carousel/left.png'); background-repeat: no-repeat; position: absolute; bottom: 5px; right: 35px; cursor: pointer; } /*** Колонки ***/ .column { -webkit-columns: 200px 2; -moz-columns: 200px 3; column: 200px 3; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; -webkit-column-rule: 1px solid #ccc; -moz-column-rule: 1px solid #ccc; column-rule: 1px solid #ccc; padding: 0 0 0 30px; /* Отступы текста */ } /*** Всплывающая подсказка ***/ .photo { display: inline-block; /* Строчно-блочный элемент */ position: relative; /* Относительное позиционирование */ } .photo:hover::after { content: attr(data-title); /* Выводим текст */ position: absolute; /* Абсолютное позиционирование */ left: 20%; top: 30%; /* Положение подсказки */ z-index: 1; /* Отображаем подсказку поверх других элементов */ background: rgba(255,255,230,0.9); /* Полупрозрачный цвет фона */ font-family: Arial, sans-serif; /* Гарнитура шрифта */ font-size: 11px; /* Размер текста подсказки */ padding: 5px 10px; /* Поля */ border: 1px solid #333; /* Параметры рамки */ }