Галерея с анимированными подсказками к изображениям

В данной галерее мы будем использовать изображения знаменитых картин различных художников

HTML

Разметка до смешного проста, выглядит она так

Код
<div class="label top">
  <p>Сохранение в памяти</p>
  <img src="images/img4.jpg" alt="Сохранение в памяти">
  </div>
   
  <div class="label bottom">
  <p>Крик</p>
  <img src="images/img2.jpg" alt="Крик">
  </div>
   
  <div class="label bottomright">
  <p>Последний ужин</p>
  <img src="images/img3.jpg" alt="Последний ужин">
  </div>

И так мы оборачиваем изображение в блок и теге параграфа мы пишем описание к картине, это описание будет у нас плавно выскакивать из за картины.

Теперь напишем CSS

Напишем простой RESET и вставим фон для тела документа

Код
* {
  margin: 0;
  padding: 0;
}

body {
  background: #f5f5f5 url('images/wood_pattern.png');
}

Теперь оформим наши блоки дадим изображениям блочный структуру. Что бы скрыть наши подсказки нам нужно добавить к нашему блоку overflow: hidden;

Код
.label {  
  overflow: hidden;
  position: relative;
  margin: 20px;
  display: inline-block;
  vertical-align: top;
   
  border: 7px solid #fff;
  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
  box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
}

.label img {
  display: block;
}

Оформим саму подсказку и сделаем ее плавной при появлении

Код
.label p {
  position: absolute;
  padding: 10px;
  width: 100%;
   
  background: #000;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font: bold italic 18px/1.5 Helvtica, Verdana, sans-serif;
   
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}


Теперь мы распишем координаты появления подсказки к разным картинам. Если вы смотрели демо, то наверняка увидели что почти у все картинок подсказка появляется по разному и в каждая в своем месте.

Если вы внимательно смотрели разметку, то должны были наткнуться на 2й класс прописанный в блоке с изображением. Например возьмем 1 блок:

Код
<div class="label top">

Класс top и дает координаты появления нашей подсказки. Вот как выглядят другие:

Код
.top:hover p, .topleft p, .topright p {
  top: 0%;
}

.top p, .centertop p {
  top: -50%;
}

.bottom:hover p, .bottomleft p, .bottomright p {
  bottom: 0%;
}

.bottom p, .centerbottom p {
  bottom: -50%;
}

.bottomleft:hover p, .bottomright:hover p, .topleft:hover p, .topright:hover p, .centerleft:hover p, .centerright:hover p {
  left: 0%;
}

.bottomleft p, .topleft p, .centerleft p, .centerleft p {
  left: -150%;
}

.bottomright p, .topright p, .centerright p {
  left: 150%;
}

.centerbottom:hover p {
  bottom: 50%;
}

.centertop:hover p, .centerleft p, .centerright p {
  top: 50%;
}

.centertop:hover p, .centerleft p, .centerright p {
  margin-top: -20px;
}

.centerbottom:hover p {
  margin-bottom: -20px;
}


Думаю на этом все, если что то не понятно, то пишите свои вопросы в комментариях! Спасибо за внимание

  • FalleN

  • 3091

  • 1

  • 162

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!