Описание для img из title, с помощью css

Можно ли из атрибута 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 - 4.02.2025 - 16:08

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

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);
        }

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

что такое раскрытый вид?

Это плагин по принципу галереи. Увеличивает изображение, открывает в модальном окне.
формирует вот такой код

<div id="galleryOverlay" style="display: block;" class="visible">
	<div id="gallerySlider" style="left: 0%;">
		<div class="placeholder">
			<img src="2.jpg" title="test1">
		</div>
		<div class="placeholder"><img src="3.jpg" title="test2"></div>
		<div class="placeholder"></div><div class="placeholder"></div>
	</div>
	<a id="prevArrow"></a>
	<a id="nextArrow"></a>
</div>

а нужно добавить в div.placeholder div с описанием

		<div class="placeholder">
			<img src="2.jpg" title="test1">
			<div class="description">test1</div>
		</div>

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

я же написал что используется. Чуть выше ссылка на неё

Решил свою проблему.

                loadImage(href, title, function () {
                    placeholders.eq(index).html(this);
                });

это заменил на

                loadImage(href, title, function () {
					var description = $('<div class="description">').text(title);
                    placeholders.eq(index).html(this).append(description);
                });