как создать блок картинок с кликабельным описанием

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

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

Рабочий вариант можно увидеть на тестовом блоге

Демонстрация

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

<style>.thumb figure {
  width: 23%; 
  margin: 1%;
  display: inline-block;
}

/* - стили ячейки - */

.thumb img {
  border: 1px solid #55c5e9;
  width: 100%;
}

/* - описания- */

.thumb figcaption {
  text-align: center;
  font-style: italic;
}</style>


<div class="thumb">

<figure>
    <img height="120" src="адрес вашего изображения" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание ">текст под картинкой</a></figcaption>
  </figure><!--
  --><figure>
    <img src="адрес вашего изображения" height="120" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание">текст под картинкой</a></figcaption>
  </figure><!--
  --><figure>
    <img height="120" src="адрес вашего изображения" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание">текст под картинкой</a></figcaption>
  </figure>
<figure>
    <img height="120" src="адрес вашего изображения" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание">текст под картинкой</a></figcaption>
  </figure>
<figure>
    <img height="120" src="адрес вашего изображения" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание">текст под картинкой</a></figcaption>
</figure>
<figure>
    <img src="адрес вашего изображения" height="120" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание">текст под картинкой</a></figcaption>
</div>

В зависимости от размера страницы, значение ширины блока  width: 23%;  можно менять, при увеличении значения, картинок в ряду будет меньше и наоборот, при уменьшении  - больше. Так что есть возможность загружать любое количество изображений и они будут автоматически переходить в следующий ряд.

Добавляйте в код сколько угодно вот таких фрагментов

<figure>
    <img src="адрес вашего изображения" height="120" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание">текст под картинкой</a></figcaption>

Размеры картинок в коде height="120" width="120", так же устанавливайте нужные. Следует учесть ещё один момент. Количество символов в описании под картинкой желательно делать одинаковое, иначе ячейки блоков не корректно отобразятся по высоте.

 text-align: center; можно изменить на left.

В редакторе изображения будут выглядеть по вертикали. Вот так

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

Сейчас вот подумала, что можно подобным образом сделать, что - то подобие карты, хотя бы для отдельного ярлыка. Создать страницу и вставить туда код. Затем после публикации очередного поста данной категории, вставлять в код фрагмент, выделенный выше. Будут и картинки, и кликабельное название поста.

А ещё, почему бы не использовать иногда такой вариант в качестве Посты по теме (или ещё как назвать это) - в конце некоторых сообщений.

Советую ещё рассмотреть и такой вариант. Творите что хотите.

У меня сегодня всё. Не отнимаю больше ваше драгоценное время. До встречи. 

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :