Вы хотите добавить на свой ресурс различных привлекающих взор пользователей фишек, тогда этот урок вам будет весьма интересный. В данном посте мы рассмотрим как создать выскальзывающие блоки для сайта с помощью трансформаций css. Идея состоит в том, что при наведении на него курсора мыши заголовок будет сменяться более детальной информацией, которая будет привлекать внимание посетителя своей динамикой. В полной красоте решение можно посмотреть в современных браузерах, которые поддерживают трансформации CSS3.

 
А в IE блок будет работать как обычная ссылка. Для начала мы рассмотрим построение HTML, как можно заметить, структура достаточно проста и не требует объяснений:

По своей сути, каждый блок является ссылкой, в которой размещаются дополнительные элементы с информацией. Все блоки помещаются в один контейнер.  Здесь блочные элементы h5 и div внутри строчного элемента a. Для преодоления данного момента служит свойство display: block, которое установлено для ссылки. Теперь рассмотрим внешний вид ссылок:

Но наш блок показывает оба кадра. Чтобы скрыть кадр элемента div установим для элементаh5 такую же высоту что для ссылки. А самой ссылке добавим свойство overflow: hidden, которое будет скрывать все, что выходит за рамки элемента. Также установим для элементаh5 выравнивание по центру нашего блока — установим для него центрирование по горизонтали и высоту строки, равной высоте блока.

Теперь займемся сменой кадров. Установим для нашего элемента div в блоке высоту и отступы для формирования внешнего вида. А смену кадров будем осуществлять установкой поля с отрицательным значением равным высоте блока для ссылки. Таким образом, первый кадр (элемент h5) будет смещаться за предлы блока и становиться невидимым, а на его место будет подниматься второй кадр (элемент div ).

Итак, смена кадров работает. Настал черед сформировать эффектный внешний вид. Для решения задачи воспользуемся трансформациями CSS3.

Для первого кадра плавно трансформироваться будет значение верхнего поля. А второй кадр мы будем немного поворачивать и менять прозрачность, так как повернутый текст немного вылазит снизу.

Теперь добавим картинки во второй кадр. Воспользуемся селектором для выделения потомков элемента по номеру:

Остается только скрасить внешний вид наших блоков. То есть нужно подобрать цвет фона, размер и начертание шрифта, ширину поле и так далее. Полный код CSS для блоков будет иметь следующий вид:

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.