Можно ли из атрибута title сделать подпись под изображением средствами css ?
Попробовал вот такой вариант - не работает :(

<div class="image-container">
    <img src="your-image.jpg" title="Это подпись к изображению" alt="Описание изображения">
</div>

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
}

.image-container img::after {
    content: attr(title);
    margin-top: 10px;
    font-style: italic;
    color: #333;
}

Хм, на div это работает, а вот на img уже нет :(

<img src="https://avatars.mds.yandex.net/get-mpic/4448884/img_id7705836799866761300.jpeg/300x300" alt="" title="test1">
<br><br><br>
<div title="test2"></div>

img::after {
  content: "Подсказка: " attr(title);
  display: inline-block;
}
div::after {
  content: "Подсказка: " attr(title);
  display: inline-block;
}

Kusss, я далёк от CSS. Но там есть что-то связанное с z-index (если не ошибаюсь у img он выше и поэтому картинка сверху), ну или попробуй катринку фоном div'а сделать.
Или картинку в div, а надпись на div а не на картинку(не забывая про z-index.

_____________
Стимулятор ~yoomoney - 41001303250491

Valick
А ты не мог бы мне помочь с js ?
Мне нужно подписать изображение текстом, но только в раскрытом виде. Но так как используется плагин "jQuery touchTouch plugin" , я решил пойти через добавление атрибута title, и с помощью css наложить текст.

А не могу в плагине разобрать как добавить div с текстом(в место атрибута) вместе с изображением.

        // Show image in the slider
        function showImage(index) {

            // If the index is outside the bonds of the array
            if (index < 0 || index >= items.length) {
                return false;
            }

            var href = items.eq(index).attr('href'),
				title = items.eq(index).attr('title');

            if (href.match(/(\.jpg)|(\.png)|(\.gif)/i)) {
                // Call the load function with the href attribute of the item
                loadImage(href, title, function () {
                    placeholders.eq(index).html(this);
                });
            } else {
                loadIframe(href, function () {
                    placeholders.eq(index).html(this);
                });
            }
        }

        // Load the image and execute a callback function.
        // Returns a jQuery object

        function loadImage(src, title, callback) {

            var img = $('<img/>').on('load', function () {
                callback.call(img);
            });
            
			img.attr('src', src);
            img.attr('title', title);
        }

        function loadIframe(src, callback) {

            var iframe = $("<div/>", {"class": "iframe-wrap"}).append($("<div/>", {"class": "iframe"}).append($('<iframe/>', {
                "src": src,
                "allowfullscreen": 'allowfullscreen'
            })));
            callback.call(iframe);
        }

Вот тут скорее всего .