Добавление текстовых заголовков к встроенным <li>изображениям

Question

Я создаю сайт портфолио и собираюсь добавить заголовки HTML-текстов под изображениями моей домашней страницы. Изображения отформатированы в виде встроенного списка с плавающей слева. Я немного новичок в этом, так что терпите меня, если это очень просто. Я хочу, чтобы текст выравнивался по левому краю под каждым изображением и был бы скрыт при наведении курсора.

Страница: http://www.lauradimeo.com/TEST/index2.html

Забыл добавить - я бы хотел, чтобы это выглядело отлично на планшетном устройстве. Я знаю, что ролловеры не будут работать, но в противном случае это должен быть ipad и т. Д.

спасибо!

Answer 1

Я думаю, у меня есть то, что вы ищете, используя только CSS (без Javascript) подход: демонстрационная страница

Внутри вашего первого элемента списка я вставил div:

div.caption {
    width:200px;           /* Because your images are 200px wide, this must match */
    clear:both;            /* This places the div after the floated image */
    position:relative;     /* Required to set positioning on the line below */
    top:-100px;            /* The div would normally appear at the bottom of the image. Move it up a little. */
    margin-bottom:-500px;  /* A hack because the div causes the li to have a larger bottom margin. Not sure how to get around this */
    z-index:2              /* Will explain this later */
}

<li> ... <div class="caption">The quick brown fox jumped over the lazy dog</div></li>

И я добавил атрибуты z-index к вашим элементам li / a / img:

#work ul li, #work ul li a, #work ul li a img {
    position: relative;    /* z-index only works on positioned elements */
    z-index: 1;            /* Default z-index 1 */
    display: block;
    float: left;
}
#work ul li a:hover, #work ul li a:active {
    position: relative;    /* Hover/active z-index 3 */
    z-index: 3;
}

Посмотрите, как использовать z-index , если вы не знакомы с ним. На тестовой странице заголовок div имеет более высокий z-индекс, чем обычное изображение, но более низкий z-индекс, чем изображение, наложенное мышью.

Это немного глупо, но есть возможности для улучшения. Кроме того, к вашему сведению, ваша страница выглядит неправильно в IE 7 - все изображения отображаются в одном столбце. Мой код может не нуждаться во взломе, если и после исправления разметки. =)

Answer 2

Другим возможным решением было бы абсолютно позиционировать изображения в ваших библиотеках и использовать поля / отступы, чтобы расположить текст под изображениями так, чтобы он был видимым до тех пор, пока изображение не будет наложено. Хотя этот подход, скорее всего, позволит вам сохранить эффекты наведения без JavaScript, он может оказаться не самым простым в реализации, поскольку ваша разметка стоит на данный момент.

Answer 3

Вы также можете попробовать использовать теги dl, dt, dd.Это даст вам тот же результат, и вы можете использовать JavaScript, чтобы показать и скрыть текст.Вы можете указать ширину DIV и DL.Тогда вы можете иметь DL float: оставленный внутри этого DIV.Пожалуйста, дайте мне знать, если это полезно.

Ссылка на тег DL http://www.w3schools.com/tags/tag_dl.asp

<div id="main-holder">
<dl id="box1" class="my-images">
<dt>Image</dt>
<dd>HTML Text</dd>
</dl>

<dl id="box2" class="my-images">
<dt>Image</dt>
<dd>HTML Text</dd>
</dl>
</div>

Answer 4

Попробуйте обернуть изображения в контейнер, как <div> -tag (вы также можете использовать <table>).Вставьте изображение в тег div и вставьте текст тоже.При наведении курсора мыши используйте javascript, чтобы скрыть текст и увеличить изображение.