Как поместить текст под картинку?

Question

[RusTaylor]

<div class="container">
            <div id="gallery">

                <figure class="photo">
                    <a href="img/originals/img-01.jpg"><img src="images/1.jpg" class="animate"/></a>
                    
                </figure>

                <figure class="photo">
                    <a href="img/originals/img-02.jpg"><img src="images/1.jpg" class="animate" /></a>
                    
                </figure>

                <figure class="photo">
                    <a href="img/originals/img-03.jpg"><img src="images/1.jpg" class="animate" /></a>
                    
                </figure>

                <figure class="photo">
                    <a href="img/originals/img-04.jpg"><img src="images/1.jpg" class="animate" /></a>
                    
                </figure>

                <figure class="photo">
                    <a href="img/originals/img-05.jpg"><img src="images/1.jpg" class="animate" /></a>
                    
                </figure>

                <figure class="photo">
                    <a href="img/originals/img-06.jpg"><img src="images/1.jpg" class="animate" /></a>
                    
                </figure>

                <figure class="photo">
                    <a href="img/originals/img-07.jpg"><img src="images/1.jpg" class="animate" /></a>
                    
                </figure>

                <figure class="photo">
                    <a href="img/originals/img-08.jpg"><img src="images/1.jpg" class="animate" /></a>
                    
                </figure>


            </div>
        </div>

.container {
    display: flex;
    align-content: flex-start;
    padding-top: 80px;
    width: 100%; /* ширина блока-контейнера */
    max-width: 960px; /* максимальная ширина контейнера */

}

 .photo {
    float: left; /* говорим элементам выстраиваться один за другим */
    width: 33.333333%; /* устанавливаем ширину элемента */
    box-sizing: border-box; /* меняем способ вычисления ширины */
}

img.animate {

    -moz-transition: all 1s ease;

    -webkit-transition: all 1s ease;

    -o-transition: all 1s ease;

    transition: all 1s ease;

    -webkit-transform: scale(0.8);

    -moz-transform: scale(0.8);

    -o-transform: scale(0.8);

    transform: scale(0.8);

    opacity: 0.5;

}

img.animate:hover {

    -moz-transform: scale(1.5); /* эффект трансформации для Firefox до версии 16.0 */

    -webkit-transform: scale(1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */

    -o-transform: scale(1.5); /* эффект трансформации для Opera до версии 12.10 */

    -ms-transform: scale(1.5); /* эффект трансформации для IE 9.0 */

    transform: scale(1.5); /* эффект трансформации для других браузеров */

    opacity: 1;

}

Есть код мини фото галереи и никак не получается сделать текст за фото

Answer 1

[Lam Besis]

Используйте тег <figcaption>. Описание по ссылке.

<figure class="photo">
	<a href="img/originals/img-07.jpg"><img src="images/1.jpg" class="animate" /></a>
	<figcaption>Описание</figcaption>
</figure>

Comments

[RusTaylor]

Этот получается под фото, а нужно чтобы фото было поверх текста

[Lam Besis]

Я не очень понимаю что вам нужно. Покажите что вы имеете ввиду под "фото поверх текста". И покажите ваш код на codepen, где видно как вы пытаетесь решить задачу.