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

Question

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

0

Я использую библиотеку instafeed для получения изображений instagram на моем веб-сайте, теперь с помощью библиотеки instafeed очень легко получить заголовок изображений.

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

Но так как это динамически создано, я не могу манипулировать выводимым html, поэтому я задаюсь вопросом, возможно ли с помощью CSS поместить текст изображения внизу каждого изображения.

HTML

<div id="instafeed">
<img src="http://distilleryimage9.s3.amazonaws.com/3a81fe1e206d11e38bc322000a9d0dcb_7.jpg">
<div class="caption">#windows #shadows #art #bw #abstract #overlap</div>
</div>

CSS

.caption {
    background-color:#ccc;
    }

img {
width: 33.33%;
float: left;

 }

JSFiddle

Dymond 19 сен. 2013, в 00:22

Источник

Теги:

jquery

html

css

2 ответа

1

img {
clear:both;
display:block;
}

Это заставит изображение "надавить" на него другие плавающие элементы.

играть на скрипке

raam86 18 сен. 2013, в 20:43

0

Да, но я хочу, чтобы изображения плавали слева друг от друга.
Dymond 18 сен. 2013, в 22:12
1

Поместите изображения в контейнер и примените к нему clear CSS. Вы все еще можете плавать контейнеры
raam86 18 сен. 2013, в 22:13

Ещё вопросы

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

dc5 · Accepted Answer · 2013-09-18T20-04-00.000Z

С помощью библиотеки instafeed у вас есть возможность указать шаблон таким образом, который работает для вашего макета.

Например, сменив шаблон на это:

var feed = new Instafeed({
    get: 'tagged',
    tagName: 'overlap',
    clientId: 'baee48560b984845974f6b85a07bf7d9',
    sortBy: 'random',
    links: false,
    resolution: 'standard_resolution',
    template: '<div class="wrap"><img src="{{image}}"/><div class="caption">{{caption}}</div></div>'
});

дает вам обертку div вокруг вашего изображения и надписи.

Вы можете определить свои стили, чтобы получить необходимый эффект:

Demo Fiddle или Demo txt on img

Смотрите второй пример, который я только что опубликовал.
Спасибо!! это работает как шарм. прямо из коробки. еще раз спасибо