Делаем всплывающее окно при наведении вышки

Такие всплывающие окна часто используются в портфолио.

Например, наводим мышкой на картинку и всплывает окно с подробным описанием.

Это реализовывается с помощью css переходов transitions.

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

Возьмем изображения img1,2 +n, положим их в папку img чистого шаблона и зададим первоначальную структуру в index.html.

Пропишем строку и нажмем tab.

Emmet в sublime text распаковал, получился набор из четырех картинок с элементом span des, это будет описание, которое всплывает.

Добавим атрибут alt, чтобы верстка была валидной.

Код index.html.

Оформим картинки в main.sass

Есть нюанс, зададим классу des бекграунд цвет rgba с альфа каналом.

Получится серый слой у span, для этого родительскому классу .portfolio li добавим свойство position: relative.

Увидим на картинках оверлей слой, который закрывает картинку.

Добавим описанию цвет текста белый.

Отступ описания от верха картинки padding-top: 30px.

Текст по центру сделаем text-align: center.

Делаем анимацию окна

Продолжаем стиль у класса des display: none это состояние до анимации transitions.

Следующей строкой делаем transitions и задаем .7s это анимация, которая происходит при наведении на картинку.

Дальше зададим .portfolio li:hover .des, что мы будем делать с hover при наведении на li display: block.

В браузере видно при наведении на картинку затемняется фон.

Сделаем всплывающее окно

Для этого зададим у des opacity: 0, а у класса при наведении .portfolio li:hover .des opacity: 1.

У portfolio li добавим overflow: hidden.

Проверим в браузере.

Получившийся код в main.sass.