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

 

В нашем примере мы будем использовать миниатюры, которые открывают дополнительную информацию при наведении курсора мыши на них. Структура будет построена на jQuery, который позволит вывести изображение в сложенном или отогнутом виде при наведении курсора мыши. Для формирования эффектов будем использовать трансформации CSS 3D.

Шаг 1. HTML

Для начала мы рассмотрим разметку html, которая достаточно простая и имеет следующий вид.

Каждая миниатюра заключена в отдельный элемент div  в который включен еще один элемент  div для дополнительной информации (view-back). Структура, которая будет создаваться для каждого элемента div с классом view с помощью  JavaScript:

Каждый слой имеет соответствующее изображение в качестве фона. Так как у нас получается вложенная структура, то можно контролировать эффект. Дополнительно используется покрывающий элемент span, который помогает придать реалистичности эффекту.

Теперь можно делать эффект для события. Для начала определим общие стили и затем сформируем первую демонстрацию.

Шаг 2. CSS

Определим стили для элемента div view. Здесь добавляется перспектива:

 Для слоев нужно добавить несколько свойств 3D и переход:

 Часть описания, которая показывается при сдвиге слоя, будет иметь следующие стили:

 Теперь зададим стили для элементов span и ссылок:

Для иконок перед элементом span будем использовать специальный шрифт, который создан с помощью сервиса Fontello. Так как мы добавляем атрибут data-icon к элементу, то будем использовать псевдо-класс :before для вывода:

Все слои, кроме первого, нужно сдвигать вправо:

Установим соответствующее положение фона для каждого слоя:

Перекрывающие слои изначально будут иметь непрозрачность 0, а затем мы сделаем переход и изменение уровня непрозрачности при наведении курсора мыши:

Зафиксируем положение и значение свойства z-index для изображений (для того, чтобы скрыть заднюю часть). Также добавим переходы для тех браузеров, которые не поддерживают 3D трансформации:

Для случаев, когда браузер не поддерживает замечательные свойства 3D, будем загружать дополнительную таблицу стилей fallback.css, которая содержится следующий код:

Слои будут смещаться влево при наведении курсора мыши. 

Для данного примера мы сделаем эффект складывания изображения. Для решения задачи установим значение свойства perspective для элемента span view и переходы для остальных элементов.

Второй, третий, четвертый и пятый слои будут переводиться и вращаться в 3D, создавая эффект складывания:

Каждый из слоев будет смещаться влево. Так как мы хотим исключить пробелы между слоями, то установим ширину 59px. Второй слой будет поворачиваться на -45 градусов. Четвертый слайд вращается в другую сторону. А третий и пятый слои поворачиваются на 90 градусов.

Для той части миниатюры, которая открывается при наведении курсора мыши, также установим градиент для фона, чтобы имитировать тень:

В демонстрации приведены также другие эффекты, код для которых можно посмотреть в исходниках.

Вот и все. Готово!

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