Такие всплывающие окна часто используются в портфолио.
Например, наводим мышкой на картинку и всплывает окно с подробным описанием.
Это реализовывается с помощью css переходов transitions.
Мы задаем объекту начальное положение, а при наведение мышкой это положение сдвигается и добавляется transitions классу.
Возьмем изображения img1,2 +n, положим их в папку img чистого шаблона и зададим первоначальную структуру в index.html.
Пропишем строку и нажмем tab.
1 |
ul>li*4>span.des+img[src=img/img$.jpg][alt=123] |
Emmet в sublime text распаковал, получился набор из четырех картинок с элементом span des, это будет описание, которое всплывает.
Добавим атрибут alt, чтобы верстка была валидной.
Код index.html.
1 2 3 4 5 6 7 8 |
<div class="portfolio"> <ul> <li><span class="des">Описание</span><img src="img/img1.jpg" alt="123"></li> <li><span class="des">Описание</span><img src="img/img2.jpg" alt="123"></li> <li><span class="des">Описание</span><img src="img/img3.jpg" alt="123"></li> <li><span class="des">Описание</span><img src="img/img4.jpg" alt="123"></li> </ul> </div> |
Оформим картинки в 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.portfolio ul, .portfolio li margin: 0 padding: 0 list-style-type: none .portfolio li display: inline-block width: 250px position: relative overflow: hidden .portfolio img max-width: 100% display: inline-block .des position: absolute left: 0 width: 100% height: 100% background: rgba(0,0,0,.7) color: #fff padding-top: 30px text-align: center opacity: 0 top: 100% transition: all .7s .portfolio li:hover .des opacity: 1 top: 0 |