Основные принципы
Эти динамические раздвижные коробки основаны на одном и том же основном принципе. Тег DIV с ".boxgrid" действует как окно после того, как вы передаете два других элемента объекта, в который хотите "заглянуть". Не уверены? Позвольте этой картинке дать вам подсказку:
Поняв этот основной принцип, мы можем использовать эффект анимации скользящих элементов, чтобы раскрыть или закрыть отображаемую область и создать эффект скольжения.
Нажмите, чтобы просмотреть эффект Загрузите исходные файлы для этого примера.
Шаг первый – основы CSS
В приведенной выше диаграмме, дающей базовую структуру, нам нужно использовать немного CSS, чтобы отобразить желаемый эффект. Следующий CSS определяет окно просмотра (.boxgrid) и устанавливает ПОЛОЖЕНИЕ изображения по умолчанию СЛЕВА и СВЕРХУ, что очень важно для перекрытия пояснений при скольжении. И не забывайте, что overflow:hidden сделает это возможным.
.boxgrid{
ширина: 325 пикселей;
высота: 260 пикселей;
поле: 10 пикселей;
плавать: влево;
фон: #161613;
граница: сплошная 2 пикселя #8399AF;
переполнение: скрыто;
положение: относительное;
}
.boxgrid img{
позиция: абсолютная;
верх: 0;
слева: 0;
граница: 0;
}
Если вы не готовы использовать CSS для достижения полупрозрачного описания, вы можете сразу перейти ко второму шагу:
.boxcaption{
плавать: влево;
позиция: абсолютная;
фон: #000;
высота: 100 пикселей;
ширина: 100%;
непрозрачность: .8;
/* Для IE 5-7 */
фильтр: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* Для IE 8 */
-MS-фильтр: «progid:DXImageTransform.Microsoft.Alpha(Opacity=80)»;
}
Теперь нам нужно установить начальную точку по умолчанию для поля заголовка (я думаю, что слои лучше, чем блоки). Если вы хотите, чтобы оно было полностью скрыто при инициализации, вам нужно будет установить TOP и LEFT на высоту и ширину вашего окна (.boxgrid), которая (конечно) определяется направлением, в котором вы хотите скользить. Вы также можете настроить отображение только его части при инициализации, как указано в этих (определенных CSS) .caption и .boxcaption:
.captionfull .boxcaption {
верх: 260;
слева: 0;
}
.caption .boxcaption {
верх: 220;
слева: 0;
}
Источник: Счастливые избранные