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

 

Мы будем использовать немного JavaScript для просмотра изображений на полный экран. Прокрутка осуществляется при помощи движения мыши. И так, давайте приступим.

Шаг 1. HTML

Для начала мы создадим простую разметку, есть несколько альтернативных способов вставки изображения. Можете воспользоваться атрибутом data-image, если хотите загружать изображения разного размера.

Так же можем вставить заголовок и описание изображения в нижнем правом углу. Для этого воспользуйтесь атрибутами data-title и data-caption.

Как вы заметили манипуляций для разметки изображений может быть несколько, каждый вариант будет приемлемый, и обеспечит правильную работу изображений на сайте.

Полноэкранное увеличение изображений на CSS3

Шаг 2. CSS

Мы опустили все малозначащие стили, основным элементом,  который сразу бросается в глаза является изменения курсора мыши при наведении на изображении, мы его изменяем со стандартного следующим образом:

Шаг 3. JS

Для использования Intense.js сначала сделаем выборку изображений с помощью document.querySelector и вызовем плагин.

Или выбрать несколько изображений по имени класса.

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

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

Читайте также: