+7 (911) 913-40---
menu
person
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Обо всём » Собираем скрипты » Эффект с изображением (Надпись под картинкой в блоке)
Эффект с изображением
artnovДата: Понедельник, 23.06.2014, 21:36 | Сообщение # 1
Начальник сайта
Группа: Администраторы
Сообщений: 151
Награды: 0
Репутация: 0
Статус: Offline

Код
<style>
figure.img {
  max-width: 25%;
  margin: 0 auto;
  box-shadow: 0 0 0 5px #fff, 0 0 4px 5px; /* рамка (она же отступ и тень) блока */
}
figure.textizo {
  width: fit-content; /* ширина блока (рисунок+описание) = ширине описания или фото, в зависимости от того, чьё значение больше; нужен -moz- и -webkit- */
}
figure.izo {
  width: min-content; /* ширина блока (рисунок+описание) = ширине изображения; нужен -moz- и -webkit- */
}
figure.img img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
figure.img figcaption {
  max-width: 100%;
  padding: 0 1%;
  font: italic 90% Georgia,serif;
}
</style>
<figure class="img izo">
  <a href="http://www.novickiy.ru/photo/1"><img alt="Голландские пейзажи " src="http://www.novickiy.ru/_ph/17/2/714102928.jpg?1403541274" height="80" width="200"></a>
  <figcaption>Голландские пейзажи украсят любой интерьер. Голландский пейзаж в гостиной или офисе, идеальное решение. </figcaption>
</figure>
Пример


Artnov
 
Форум » Обо всём » Собираем скрипты » Эффект с изображением (Надпись под картинкой в блоке)
  • Страница 1 из 1
  • 1
Поиск: